html5+css+JavaScript 輪播圖

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;
}
#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.