我們在瀏覽網(wǎng)頁的時候撒遣，大部分都會看見中間有幾張圖片在自己走動，今天就教一下大家怎么實現(xiàn)
首先我們要在html中排個版,在body里邊

<div class="box">
        <ul>
            <li><img src="../imgs/1.jpg" alt=""></li>
            <li><img src="../imgs/2.jpg" alt=""></li>
            <li><img src="../imgs/3.jpg" alt=""></li>
            <li><img src="../imgs/4.jpg" alt=""></li>
            <li><img src="../imgs/5.jpg" alt=""></li>
            <li><img src="../imgs/6.jpg" alt=""></li>
            <li><img src="../imgs/7.jpg" alt=""></li>
        </ul>
        <button id="left">&lt;</button>
        <button id="right">&gt;</button>
        <ol>  
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>

接下來我們在scss里邊給設(shè)置一下樣式

.box {
    width:800px;
    height:380px ;
    position: relative;
    margin: 0 auto;

    ul {
       width:800px;
       height:380px ;
        overflow: hidden;

        li {
           width:800px;
           height:380px ;
            img {
                width:800px;
               height:380px ;
            }
        }
    }


    button {
      width:60px;
      height:80px
        position: absolute;
        top: 50%;
        margin-top: -40px;
        background-color: rgba(0, 0, 0, 0.4);
        color: #fff;
        font-size: 40px;
        border: none;
        
    }

    #right{
        position: absolute;
        right: 0px;
    }
    ol{
        position: absolute;
        bottom:50px;
        left:135px;
        li{
          width: 20px;
          height: 20px;
          background-color: #fff;
          border-radius: 50%;
          margin:0px 30px;
          float: left;
        }
         .active{
           background-color: pink;
         }
      }
}

接下來就是js部分

var list = document.querySelectorAll('ul li')  //獲取圖片列表
var rgt = document.getElementById("right")  //右側(cè)點擊
var left = document.getElementById("left")   //左側(cè)點擊
var box = document.getElementsByClassName("box")[0]  //大盒子
var ol_list = document.querySelectorAll('ol>li');   //下面的原點
var timer = null,  定義一個計時器
    ind = 0;  //定義一個下標(biāo)

// 封裝排他  （只顯示自己）
function getpaita() {
    for (var i = 0; i < list.length; i++) {
        list[i].style = "display:none";  //所有圖片不顯示
        ol_list[i].style = '';  //所有原點不顯示
    }
    list[ind].style = "display:block"  //當(dāng)前圖片
    ol_list[ind].style = "background:pink";  //當(dāng)前原點
}
// 開始輪播
function tim() {
    ind++; //下標(biāo)增加
    if (ind > list.length - 1) {  //判斷 如果下標(biāo)到了最后臨界點則返回第一張
        ind = 0;
    }
    
    getpaita()  //排他
}
timer = setInterval(tim, 1000);
// 劃過停止輪播  清除定時器
box.onmouseover = function () {
    clearInterval(timer);
}
// 劃出繼續(xù)執(zhí)行定時器
box.onmouseout = function () {
    timer = setInterval(tim, 1000);
}

// 右擊換下一張
rgt.onclick = function () {
    ind++;
    if (ind > list.length - 1) {
        ind = 0;
    }
    getpaita()
}
// 左擊換上一張
left.onclick = function () {
    ind--;
    console.log(ind)
    if (ind < 0) {
        ind = list.length - 1; //如果下標(biāo)到了前面臨界點則返回最后一張
    }
    getpaita()

}

// 原點  劃過顯示相對應(yīng)圖片
for (var j = 0; j < ol_list.length; j++) {
    ol_list[j].ind = j;
    ol_list[j].onmouseover = function () {
        ind=this.ind;  跟圖片下標(biāo)同步
        getpaita();
    }
}

這就是一個簡單輪播肌似，可以放幾張圖片試試