使用原生JS實作輪播圖（導航點聯動）

1.思路

輪播圖的實作，實際上是操作ul的邊距值（本質就是操作可視范圍的顯示隱藏），使用盒子裝著這個較長的圖片畫廊，盒子的寬度，就是圖片的寬度，畫廊的長度，可以動態設定，但是作為講解就直接給出固定的大小了，

2.布局

1.div（盒子）

<!-- 基本模型搭建，最后一張圖片應該是第一張圖片的 這樣看起來連貫比較絲滑-->
        <div class="jd_banner">
            <ul>
                <li>
                    <a href="#"><img src="image/l8.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="image/l1.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="image/l2.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="image/l3.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="image/l4.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="image/l5.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="image/l6.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="image/l7.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="image/l8.jpg" alt=""></a>
                </li>
            </ul>
            <ul id="now_list">
                <li class="now"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li style="display: none;"></li>
            </ul>
        </div>
     

補充：給盒子開啟相對定位（很重要）

.jd_banner {
    position: relative;
    width: 100%;
    overflow: hidden;
}
   <!-- 導航點 -->
.jd_banner ul:last-child li.now {
    background: #fff; 
}

3.實作

1.獲取盒子：

    var banner = document.querySelector('.jd_banner');

2.獲取盒子寬度（也可以根據不同的需求設定）因為這里是為了適配圖片的 小編的盒子寬度是100%

    var width = banner.offsetWidth;

3.獲取需要操作的畫廊（設定第一張圖片位置）

    var imageBox = banner.querySelector('ul:first-child');
      imageBox.style.marginLeft = width+"px"

4.通過margin值可以改變畫廊圖片位置，那我們就得到一個公式（- 當前索引 * 盒子寬度 = 第 [ 索引 ] 張圖片）

//定義一個索引
var position = 0

//定時器 實作輪播
  setInterval(() => {
        imageBox.style.marginLeft = (-position)*width+"px" 
        position++;
        if(position == 8){
         position = 0;
        }
    }, 3000);

到這一步已經實作簡單的輪播效果了（每張圖片都會被輪播）

5、獲取導航點ul元素

	//獲取ul元素
    var whiteList = document.getElementById('now_list')

6.清除導航點樣式屬性：

   function clearWhite(){
        for (let index = 0; index < whiteList.getElementsByTagName('li').length; index++) {
            whiteList.getElementsByTagName('li')[index].className = ""
    }
}

7.導航點聯動（在設定之前都需要恢復默認值）

        clearWhite()
        whiteList.getElementsByTagName('li')[position].className = "now"

8.添加影片切換效果：

//延時滑動效果
function delay(){
    setTimeout(function(){
        imageBox.style.transition = "none"
        imageBox.style.marginLeft = width+"px";
    },2950)
}

9.定時器配合導航點以及圖片影片切換

 setInterval(() => {
        imageBox.style.transition = "all 1s ease"
        imageBox.style.marginLeft = (-position)*width+"px"
        clearWhite()
        whiteList.getElementsByTagName('li')[position].className = "now"
        position++;
	        if(position == 8){
	         position = 0;
	         delay();
	        }
    }, 1000);

以上就是使用原生JS寫輪播圖的大致流程以及思路了（因為小編也是好久沒寫過原生的JS了，所以這里感受一下原生JS帶來的快落~）