html5+css+JavaScript 轮播图

Posted 2021-03-01 Gangpei

BEGIN：

html代码如下

<div id="slideShowContainer">
    <ul id="imgUl">
        <li> <div class="SlidePic"> <a href="#"><img src="img/g_1.jpeg" alt="" /></a> </div> </li>
        <li> <div class="SlidePic"> <a href="#"><img src="img/g_2.jpeg" alt=""/></a> </div> </li>
        <li> <div class="SlidePic"> <a href="#"><img src="img/g_3.jpeg" alt="" /></a> </div> </li>
    </ul>
    <ul id="bUl">
        <li class="selected">1</li>
        <li class="unselecte">2</li>
        <li class="unselecte">3</li>
    </ul>
    <div id="titleDiv">
        <span class="show"><a href=‘#‘>图片介绍</a></span>
        <span class="hide"><a href=‘#‘>图片介绍</a></span>
        <span class="hide"><a href="#">图片介绍</a></span>
    </div>
</div>      

javascript代码如下

       

  <script type="text/javascript">var im=document.getElementById("imgUl").getElementsByTagName("li");
    var b=document.getElementById("bUl").getElementsByTagName("li");
    var title=document.getElementById("titleDiv").getElementsByTagName("span");
    var index=0;
    var timer=null;
    
    /*定义图片切换函数*/
    function changePic(cIndex){
        /*让所有图片隐藏*/
        for(var i=0;i<im.length;i++){
            im[i].style.display="none";
            b[i].className="unselecte";
            title[i].className="hide"
        }
        /*指定图片显示*/
        im[cIndex].style.display="block";//显示图片
        b[cIndex].className="selected";//显示标号
        title[cIndex].className="show";//显示说明标注
    }
    
    /*index超出图片总量时归零*/
    function autoPlay(){
        if(+index>=im.length){
            index=0;
        }
        changePic(index);
        index++;
    }
    /*定义并调用自动播放函数*/
    timer=setInterval(autoPlay,1500);
    
    /*鼠标划过整个容器时停止自动播放*/
    slideShowContainer.onmouseover=function(){
        clearInterval(timer);
    }
    slideShowContainer.onmouseout=function(){
        timer=setInterval(autoPlay,1500);
    }
    /*遍历所有数字导航实现划过切换至对应图片*/
    for(var i=0;i<b.length;i++){
        b[i].onmouseover=function(){
            clearInterval(timer);
            index=this.innerText-1;
            changePic(index);
        }
    }
    
</script>     

css代码如下

.slideDiv{
    height: 410px;
    text-align: center;
    overflow:hidden;
    opacity: 0.6;
}
#slideShowContainer｛
    overflow: hidden;
    position: relative;/*用于小方框的定位*/        
｝

.SlidePic{
    position: relative;
    transition: all 0.6s;
}


#slideShowContainer img{
    z-index: -1;
    transition: all 0.6s;                
}


#slideShowContainer img:hover{
    transform: scale(1.07);
}
#imgUl{
    list-style: none;
}
#bUl{
    list-style: none;
    display: flex;
    flex-direction: row;
    /*将小方框固定在右下角*/
    position: absolute;
    right: 25%;
    bottom: 1%;
    /*通过设置z-index的值大于#titleDiv中z-index的值，
     * 使其浮在标题栏的上方*/
    z-index: 2;
}
#titleDiv{
    position: absolute;
    width: 100%;
    /*height: 80;*/
    bottom: 1%;
    /*left: 20%;*/
    background-color: black;
    /*设置透明度，实现标题栏半透明效果*/
    opacity: 0.6;
    z-index: 1;
}
#titleDiv>span{
    position: relative;
    left: 20%;
    line-height: 42px;
    color: #FFFFFF;
    margin-left: 20px;
    width: 270px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#titleDiv>span>a{
    color: #FFFFFF;
    /*text-decoration-style: none;*/
}
.selected{
    /*font-size: 15px;*/
    width: 12px;
    height: 12px;
    background-color: #FFFFFF;
    color:black;
    margin-left: 9px;
}
.hide{
    display: none;
}
.show{
    display: block;
}

 

END.