js实现轮播图

1、动态获取小圆圈。

// 动态获取小圆圈
// 1、循环img_box的li,创建li，添加到circle里面
var img_box = document.querySelector('.img_box');
var lis = img_box.querySelectorAll('li');//图片
var circle = document.querySelector('.circle')
console.log(lis);
for(var i = 0; i < lis.length; i++) {
    var btns = document.createElement('li');//创建小圆圈按钮
    circle.appendChild(btns);//添加到circle里 父前子后
    // 第一个小圆圈添加样式；
    circle.children[0].className = 'current';
}

2、点击小圆圈切换样式。

  // 点击小圆圈 切换样式；
  btns.addEventListener('click',function() {
      // 获取小圆圈
      var cir_btns = circle.querySelectorAll('li');
      // 循环删除所有小圆圈的样式；
      for(var i = 0; i < cir_btns.length; i++) {
          cir_btns[i].className = '';
          cir_btns[i].index = i ;
      }
      //留下自己；
      this.className = 'current';
      // 获取点击的按钮索引号
      var index = this.index;

  })

3、点击小圆圈切换到对应的图片。

        // 切换到对应的图片
        // 调用animate函数，写入两个值：要移动的盒子，距离
        animate(img_box, -index * 400);

4、鼠标经过图片盒子左右按钮显示，离开消失。

// 鼠标经过图片盒子，左右箭头出现，离开消失；
var box = document.querySelector('.box');
var arrow_r = document.querySelector('.arrow_r')
var arrow_l = document.querySelector('.arrow_l')
box.addEventListener('mouseenter',function() {
    arrow_l.style.display = 'block';
    arrow_r.style.display = 'block';
    clearInterval(timer);
});
box.addEventListener('mouseleave',function() {
    arrow_l.style.display = 'none';
    arrow_r.style.display = 'none';
    autoPlay();
})

5、点击右按钮，显示下一张图片，对应小圆圈切换样式。

// 点击右箭头，滑动到下一张图片；
var num = 0;
var circle_btns = 0;
arrow_r.addEventListener('click',function() {
    num++;
    // 当num大于当前图片数量，则返回0,盒子距离也返回0，第一张；
        if(num >= 3) {
        num = 0;
        img_box.style.left = 0;
    }
    console.log(num);
    circle_btns++;
  // 当 circle_btns大于当前按钮数量，则返回0，第一张；
    if(circle_btns > 2) {
        circle_btns = 0;
    }
    console.log(circle_btns);
    // 图片盒子移动
    animate(img_box,- num * 400);
    circlestyle();
})

// 对应小圆圈添加样式 其他清除样式；
// 封装一个函数;
function circlestyle() {
    for(var i = 0; i < circle.children.length; i++) {
        circle.children[i].className = '';
    }
    //留下自己；
    circle.children[circle_btns].className = 'current';
}

6、当滑动到num=3时，因为没有图片所以会露出背景色的bug，解决方法：动态克隆第一张图片添加到图片盒子里；

// 获取元素
var imgone = img_box.children[0].cloneNode(true);
img_box.appendChild(imgone);

7、点击左按钮，显示上一张图片，对应小圆圈切换样式。

// 点击左箭头，滑动到上一张图片；
arrow_l.addEventListener('click',function() {
    num--;
    // 当num大于当前图片数量，则返回0，第一张；
    if(num < 0) {
        num = 2;
        animate(img_box,-1600);
    }
    circle_btns--;
    if(circle_btns < 0) {
        circle_btns = 2;
    }
    console.log(circle_btns);
    // 图片盒子移动
    animate(img_box,- num * 400);
    circlestyle();
})

8、开启计时器，自定点击右按钮。
(在mouseenter里清除定时器，在mouseleave中开启定时器；)

// 开启定时器，自动点击右箭头；
var timer = null;
function autoPlay(){
    timer = setInterval(function() {
        arrow_r.click();
    },2000);
}
autoPlay();

CSS

* {
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
}



.box {
    position: relative;
    margin: 100px auto;
    width: 400px;
    height: 300px;
    background-color: darkred;
    overflow: hidden;
}

.box .img_box {
    position: absolute;
    left: 0;
    top: 0;
    width: 1600px;
    height: 100%;
    z-index: 1;
}

.img_box li>img {
    float: left;
    width: 400px;
    height: 300px;
    object-fit: cover;
}
.circle {
    position: absolute;
    bottom: 20px;
    left: 40%;
    z-index: 2;
}
.circle>li {
    float: left;
    margin-right: 6px;
    width: 14px;
    height: 14px;
    border: 2px #fff solid;
    border-radius: 50%;
    cursor: pointer;
}
.circle .current {
    background-color: #fff;
}
.arrow_l,
.arrow_r {
    position: absolute;
    top: 40%;
    display: none;
    width: 30px;
    background-color: rgba(255, 255, 255, .3);
    z-index: 3;
    color: #fff;
}
.arrow_r {
    right: 0;
}
.icon-ctrl1,.icon-ctrl2 {
    font-size: 30px;
}
.icon-ctrl1:hover {
    color: red;
}
.icon-ctrl2:hover {
    color: red;
}

HTML

 <!-- 大盒子套三个小盒子，分别是图片盒子，圆圈按钮盒子，左右箭头盒子 -->
    <div class="box">
        <ul class="img_box">
            <li>
                <img src="./images/3.jpg" alt="">
            </li>
            <li>
                <img src="./images/4.jpg" alt="">
            </li>
            <li>
                <img src="./images/5.png" alt="">
            </li>
        </ul>
        <!-- 小圆圈按钮 -->
        <ol class="circle">
        </ol>
        <!-- 左右箭头 -->
        <a href="JavaScript:;" class="arrow_l">
            <span class="icon-ctrl1"></span>
        </a>
        <a href="JavaScript:;" class="arrow_r">
            <span class="icon-ctrl2"></span>
        </a>
    </div>
</body>
<script src="./animate.js"></script>
<script src="./index.js"></script>