淘寶經典移動輪播製作

看了看記錄，發現上次發表文章時間竟然是去年的時候了，有點小尷尬，每次都有一種發表文章的衝動，但懶漢加成，又讓我望而止步。這幾天剛好用原生JS實現了平移輪播圖，跟淘寶上的效果一樣，話不多說，代碼奉上。
先看輪播圖的結構，總共結構分爲6張圖片，兩個左右移動按鈕，還有下面的控制小圓點。

<div class="box">
    <div class="box_img">
        <img src="img/5.jpg">
        <img src="img/1.jpg">
        <img src="img/2.jpg">
        <img src="img/3.jpg">
        <img src="img/4.jpg">
        <img src="img/5.jpg">
        <img src="img/1.jpg">
    </div>
    <button><</button>
    <button>></button>
    <ul>
        <li class="act"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

再看樣式，樣式我是用less寫的，簡單講就是將7張圖片橫排在一起這樣寬度就超出包裹它的父容器，其中首尾兩張圖片是一樣的，就是爲了在平移切換圖片的時候有個過度效果。但是給父容器設置一個溢出隱藏，這樣每次就只會看到一張圖片了，另外可以左右按鈕還有下面的控制圓點都可以定位上去。

*{
  margin: 0;
  padding: 0;
  list-style: none;
}
.box{
  position: relative;
  width:520px;
  height: 280px;
  cursor: pointer;
  //overflow: hidden;
  border: 5px solid;
  margin: 100px auto;
  &:hover button{
    display: block;
  }
  &>.box_img{
    display: flex;
    position: absolute;
    left: -520px;
  }
  &>button{
    display: none;
    width: 30px;
    height: 60px;
  }
  &>button:nth-of-type(2){
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }
  &>button:nth-of-type(1){
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  &>ul{
    position: absolute;
    left: 50%;
    top: 250px;
    display: flex;
    align-items: center;
    width: 100px;
    height: 20px;
    border-radius: 20px;
    justify-content: space-around;
    transform: translateX(-50%);
    background: rgba(0,0,0,.5);
    &>.act{
      background: orange;
    }
    &>li{
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: white;
    }
  }
}
![在這裏插入圖片描述](https://img-blog.csdnimg.cn/20190103115206205.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg1NTU0MQ==,size_16,color_FFFFFF,t_70)

接下看看重點如何實現JS，先聲明一個函數，裏面設定了每次平移輪播的時間爲800毫秒，然後假設每次總共移動的距離爲dis是個變量當做參數傳進去，每移動一小次的距離爲eachDis,然後通過定時器來實行，當往左邊移動的時候dis大於0，並且噹噹前的距離小於移動的距離或者當右移動的時候dis小於0，並且當前的距離大於要移動後的距離，只要滿足兩者的條件，就開始移動。當不滿足的時候清空定時器。

var oBox = document.getElementsByClassName("box")[0];
var oImg = document.getElementsByClassName("box_img")[0];
var oLi = document.getElementsByTagName("li");
var oBtn = document.getElementsByTagName("button");
var oUl = document.getElementsByTagName("ul")[0];

var timer1,timer2;
var index = 0;
var flag = true;
function moveImg(dis) {
    flag = false;
    var time = 800;//設定每次輪播的時間
    var eachTime = 40;//設定每次移動一下段距離時間
    var eachDis = dis/(time/eachTime);//每次移動一小次的距離
    var newLeft = oImg.offsetLeft + dis;//移動後的距離
    function eachMove() {
        if (dis>0&& oImg.offsetLeft<newLeft ||dis<0 && oImg.offsetLeft>newLeft){
            oImg.style.left = oImg.offsetLeft + eachDis +"px"
        }else {
            clearInterval(timer1);
            // oImg.style.left = newLeft +"px";
            if (newLeft == -3120) oImg.style.left = -520 +"px";//當平移到第6張圖的時候又跳回第二張圖
            if (newLeft ==0) oImg.style.left = -2600 + "px" ;//當平移到第一張圖的時候又跳回第五張圖
            flag = true
        }
    }
    timer1 = setInterval(eachMove,eachTime);
}

每次點擊左右兩邊按鈕的時候就是往函數裏傳520跟-520，圖片大小是就是520px.另外爲了點擊按鈕使下面的圓點的樣式變化跟圖片保持一致，我們可以設置一個開關初始flag爲true,點擊後執行的時候變成false,等執行完畢再變成true。

// 每次清空下面圓點的樣式，並且只保留點擊的那個圓點樣式
function changLi(j){
    oUl.getElementsByClassName("act")[0].className = "";
    oLi[j].className = "act";
}
for (let k = 0;k<oLi.length;k++){
    oLi[k].onclick = function () {
        if (flag ==false) return;
        var num = k-index;
        index = k;
        changLi(index);
        moveImg(-520*(num))
    }
}
// 右邊按鈕
oBtn[1].onclick = function(){
    if (flag ==false) return;
    moveImg(-520);
    if (index==4){
        index = 0
    }else {
        index++;
    }
    changLi(index);
};
// 左邊按鈕
oBtn[0].onclick = function(){
    if (flag ==false) return;
    moveImg(520);
    if (index ==0){
        index = 4
    } else {
        index--;
    }
    changLi(index);
};
timer2 = setInterval(oBtn[1].onclick,800);
oBox.onmouseover = function(){
    clearInterval(timer2)
};
oBox.onmouseout = function(){
    timer2 = setInterval(oBtn[1].onclick,800);
};