js轮播图

什么是轮播图呢？能够实现多张图片循环出现效果的我们称之为轮播图。

html样式

  <div class="box">
    <ul>
        <li><img src="../images/imgs/timg (1).jpeg" alt=""></li>
        <li><img src="../images/imgs/timg (2).jpeg" alt=""></li>
        <li><img src="../images/imgs/timg (3).jpeg" alt=""></li>
        <li><img src="../images/imgs/timg (4).jpeg" alt=""></li>
        <li><img src="../images/imgs/timg (5).jpeg" alt=""></li>
        <li><img src="../images/imgs/timg (6).jpeg" alt=""></li>
    </ul>
    <ol>
        <li class="active">1</li>//小圆圈
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ol>
    <button class="leftbtn">&lt;</button>//左边按钮
    <button class="rightbtn">&gt;</button>//右边按钮
</div>

css样式

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

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

.box ul li {
width: 800px;
height: 380px;
 }

 .box ul li img {
width: 800px;
height: 380px;
 }

 .leftbtn {
width: 80px;
height: 150px;
background-color: rgba(0, 0, 4, 0.6);
color: #fff;
font-size: 100px;
line-height: 150px;
text-align: center;
position: absolute;
border: none;
top: 50%;
outline: none;
margin-top: -75px;
  }


.rightbtn {

width: 80px;
height: 150px;
background-color: rgba(0, 0, 4, 0.6);
color: #fff;
font-size: 100px;
line-height: 150px;
text-align: center;
position: absolute;
border: none;
top: 50%;
margin-top: -75px;
outline: none;
right: 0;
 }

.box ol {
position: absolute;
bottom: 30px;
left: 100px;
}

  .box ol li {
width: 50px;
height: 50px;
background-color: #fff;
border-radius: 50%;
margin: 0px 20px;
float: left;
text-align: center;
line-height: 50px;
 }

 .box ol .active {
 background-color: green;
 }

js样式

  <script>
  var box = document.getElementsByClassName("box")[0];//获取最大的盒子
    var img_list = document.querySelectorAll(".box ul li ");//获取所有ul里的li
    var ol_list = document.querySelectorAll(".box ol li");//获取所有ol里的li
    var left = document.querySelector(".leftbtn");//获取左边的button
    var right = document.querySelector(".rightbtn");//获取右边的button
    var index = 0, timer = null;//下标从0开始，定时器为空
     timer = setInterval(auto, 1000);//自动开启定时器
   
   function getThis() {//封装排他      
  for (i = 0; i < img_list.length; i++) {//循环遍历每一项
            img_list[i].style = "display:none";//先将每一项ul里的li隐藏，干掉所有图片
            ol_list[i].className = "";//干掉所有圆点导航
        }
        img_list[index].style = "display:block";//留下当前图片
        ol_list[index].className = "active";//留下当前圆点导航
       }


    function auto() {//封装向后自动轮播效果
        index++;
        if (index > img_list.length - 1) {//判断边界值
            index = 0;//超过则返回第一张
        }
        getThis();
    }

   
    right.onclick = function () {//右击 切换下一张
        auto();
    }
    left.onclick = function () {//左击 切换上一张
        index--;
        if (index < 0) {
            index = img_list.length - 1;
        }
    getThis();
    }

    for (var i = 0; i < ol_list.length; i++) {//划过圆点导航 显示对应图片
        ol_list[i].ind = i;
        ol_list[i].onmouseover = function () {
            for (var j = 0; j < ol_list.length; j++) {
                ol_list[j].className = "";
            }
            ol_list[this.ind].className = "active";
            index = this.ind;//同步计时器的下标
            getThis();
        }
    }

    box.onmouseover = function () {
        clearInterval(timer);//什么时候清除定时器
    }
    box.onmouseout = function () {
        timer = setInterval(auto, 1000);//什么时候开始定时器
    }
</script>

屏幕快照 2019-10-18 下午8.57.09.png

这就是我敲出的轮播图，如果大家感兴趣的话可以试一下喔，js小白，如有错误，望多指教，谢谢! ! !