JavaScript实现轮播图效果

我又来了，同志们。老想你们了

捕获小可爱一枚。

下面进入正题：用JavaScript原生代码写轮播图效果。

具体效果就不多说了，网站上面的轮播效果我们都知晓。下面是展示代码

html代码：

 <div class="main">
     <ul>
         <li style="display: block;"> <img src="img/a1 (1).jpg" /></li>
         <li> <img src="img/a1 (2).jpg" /> </li>
         <li> <img src="img/a1 (3).jpg" /> </li>
         <li> <img src="img/a1 (4).jpg" /> </li>
         <li> <img src="img/a1 (5).jpg" /> </li>
     </ul>
     <div class="ctrl">
         <span>&lt;</span>
         <span>&gt;</span>
     </div>
     <div class="ditto">
         <p class="active">1</p>
         <p>2</p>
         <p>3</p>
         <p>4</p>
         <p>5</p>
     </div>

 </div>

css代码：

 * {
     padding:;
     margin:;
 }

 .main {
     height: 400px;
     width: 600px;
     margin: 0 auto;
     position: relative;
 }

 .main ul li {
     height: 400px;
     width: 600px;
     list-style: none;
     position: absolute;
     display: none;
 }

 .main ul li img {
     height: 400px;
     width: 600px;
     cursor: pointer;
 }

 .ctrl {
     height: 40px;
     width: 100%;
     position: absolute;
     bottom: 50%;
     text-align: center;
 }

 .ctrl span {
     width: 40px;
     height: 40px;
     border-radius: 100%;
     line-height: 40px;
     font-size: 32px;
     color: #ffffff;
     background-color: rgba(0, 0, 0, 0.2);
     cursor: pointer;
 }

 .ctrl span:nth-child(1) {
     float: left;
 }

 .ctrl span:nth-child(2) {
     float: right;
 }

 .ditto {
     position: absolute;
     width: 200px;
     height: 20px;
     bottom: 30px;
     left: 38%;
 }

 .ditto p {
     height: 20px;
     width: 20px;
     line-height: 20px;
     background: #efefef;
     text-align: center;
     width: 20px;
     height: 20px;
     float: left;
     border-radius: 100%;
     margin-left: 10px;
     cursor: pointer;
 }

 .ditto .active {
     background: #ff9000;
     box-shadow: 0 0 10px #FF9000;
 }

css代码

js代码：

 <script type="text/javascript">
         //获取节点
         var box_v = document.querySelector('.main');
         var li_v = document.querySelectorAll('.main ul li');
         var p_v = document.querySelectorAll('.ditto>p');
         var ctrl_v = document.querySelectorAll('.ctrl>span');
         console.log(li_v);
         //声明全局变量
         var current = 0;
         var timer = null;
         var pre = null;
         var nex = null;
         //开启自动循环轮播,封装函数move
         function move() {
             //首先清除当前current以外的li_v的样式显示和伪圆标p_v的效果, 以下的同上
             for (let i = 0; i < li_v.length; i++) {
                 li_v[i].style.display = "none";
                 p_v[i].className = "";
             }
             //鼠标移入的时候获取当前的索引,也就是变量current
             current = (current + 1) % li_v.length;
             console.log(current);

             //然后一个一个实现轮播和图标效果
             li_v[current].style.display = "block";
             p_v[current].className = "active";
         };
         timer = setInterval(move, 1500);

         for (let i = 0; i < li_v.length; i++) {
             //鼠标划入图片区域时清除定时器,暂停于当前页面
             li_v[i].onmouseover = function() {
                 clearInterval(timer);
             }
             //鼠标移出图片区域时继续向下轮播
             li_v[i].onmouseout = function() {
                 timer = setInterval(move, 1500);
             }
         }
         // 当鼠标放在小圆标的时候清除定时器,暂停于当前图片页面和圆标实现效果
         for (var i = 0; i < p_v.length; i++) {
             p_v[i].index = i;
             p_v[i].onmouseover = function() {
                 clearInterval(timer);
                 for (var i = 0; i < li_v.length; i++) {
                     p_v[i].className = "";
                     li_v[i].style.display = "none";
                 }
                 this.className = "active";
                 // console.log(this.index);
                 //实现当鼠标移出小圆标的时候继续轮播图片页面和圆标实现效果,此时current为this.index
                 current = this.index;
                 li_v[this.index].style.display = "block";
             }
         }

         //左按钮事件
         ctrl_v[0].onclick = function() {
             clearInterval(timer);
             clearInterval(pre);
             pre = setTimeout(preclick, 10)
             timer = setInterval(move, 1500);
         }
         //封装点击左按钮实现上个一个图片
         function preclick() {
             for (var i = 0; i < li_v.length; i++) {
                 li_v[i].style.display = "none";
                 p_v[i].className = "";
             }
             current = (current - 1 + li_v.length) % li_v.length;
             //         console.log(current);
             li_v[current].style.display = "block";
             p_v[current].className = "active";
         };
         // 右边按钮事件实现下一张图片
         ctrl_v[1].onclick = function() {
             clearInterval(timer);
             clearInterval(nex);
             nex = setTimeout(move, 10)
             timer = setInterval(move, 1500);
         }
     </script>

欢迎来访，你们的瓶子。。。mua，大家晚安