html中使用JS實現圖片輪播效果

1.首先是效果圖，要在網頁中實現下圖的輪播效果，有四張圖片，每張圖片有自己的標題，然後還有右下角的小方框，滑鼠懸浮在小方框上，會切換到對應的圖片中去。

2.先是HTML中的內容，最外層是輪播圖整個的容器“slideShowContainer”，裡邊是用來裝圖片的“picUl”和用來顯示小方框的“dotUl”，以及用來裝標題的“titleDiv”。

<div id="slideShowContainer">
    <ul id="picUl">
        <li><a href="#"><img src="img/lunbo1.jpg" alt=""/></a></li>
        <li><a href="#"><img src="img/lunbo2.jpg" alt=""/></a></li>
        <li><a href="#"><img src="img/lunbo3.jpg" alt=""/></a></li>
        <li><a href="#"><img src="img/lunbo4.jpg" alt=""/></a></li>
    </ul>
    <ul id="dotUl">
        <li class="selected">1</li>
        <li class="unselected">2</li>
        <li class="unselected">3</li>
        <li class="unselected">4</li>
    </ul>
    <div id="titleDiv">
        <span class="show"><a href="#">黨政機關公務用車有了統一標識</a></span>
        <span class="hide"><a href="#">“洛陽創新”亮相第52屆巴黎航展</a></span>
        <span class="hide"><a href="#">中國河洛鄉愁攝影主題公園揭牌</a></span>
        <span class="hide"><a href="#">洛陽機場建成生態停車場</a></span>
    </div>
</div>

3.然後是css中的樣式

#slideShowContainer{
    width: 425px;
    height: 325px;
    margin-top: 10px;
    margin-left: 10px;
    overflow: hidden;
    position: relative;
}
#slideShowContainer img{
    width: 425px;
    height: 325px;
    transition: all 0.6s;
}
#slideShowContainer img:hover{
    transform: scale(1.07);
}
#picUl{
    list-style: none;
}
#dotUl{　　　　
    list-style: none;
    display: flex;
    flex-direction: row;
    position: absolute;　　//使用絕對佈局，固定於左下角
    right: 21px;
    bottom: 15px;
    z-index: 2;　　//通過設置z-index的值大於#titleDiv中z-index的值，使其浮在標題欄的上方
}
#titleDiv{
    position: absolute;
    width: 100%;
    height: 42px;
    bottom: 0px;
    left: 0px;
    background-color: #000000;
    opacity:0.6;　　//設置透明度，實現標題欄半透明效果
    z-index: 1;
}
#titleDiv>span{
    line-height: 42px;
    color: #FFFFFF;
    margin-left: 20px;
    width: 270px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#titleDiv>span>a{
    color: #FFFFFF;
}
.selected{
    width: 12px;
    height: 12px;
    background-color: #FFFFFF;
    color: transparent;
    margin-left: 9px;
}
.unselected{
    width: 12px;
    height: 12px;
    background-color: #0069AD;
    color: transparent;
    margin-left: 9px;
}

.hide{
    display: none;
}
.show{
    display: block;
}

4.通過js控制，動態修改相應的樣式，達到圖片輪播的效果

/*圖片輪播*/
var slideShowContainer = document.getElementById("slideShowContainer");
var pic = document.getElementById("picUl").getElementsByTagName("li");
var dot = document.getElementById("dotUl").getElementsByTagName("li");
var title = document.getElementById("titleDiv").getElementsByTagName("span");
var index = 0;
var timer = null;
/*定義圖片切換函數*/
function changePic (curIndex) {
    for(var i = 0;i < pic.length;++i){
        pic[i].style.display = "none";
        dot[i].className = "unselected";
        title[i].className = "hide"
    }
    pic[curIndex].style.display = "block";
    dot[curIndex].className = "selected";
    title[curIndex].className = "show";
}
/*index超出圖片總量時歸零*/
function autoPlay(){
    if(+index >= pic.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 < dot.length;i++){
    dot[i].onmouseover = function(){
        clearInterval(timer);
        index = this.innerText-1;
        changePic(index)
    }
}