使用原生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带来的快落~）