JavaScript如何实现轮播图

这篇文章给大家分享的是有关JavaScript如何实现轮播图的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

运用定时器所写成的一个简单的轮播图，直接看代码，如下：

1.css代码

<style>        *{            margin: 0;            padding: 0;            box-sizing: border-box;        }        body{            font-size: 14px;            font-family: Arial, Helvetica, sans-serif;        }        .slider-box{           width: 1226px;           height: 460px;           margin: 10px auto;           overflow: hidden;           position: relative;        }       .slider-box .images a{         width: 100%;         height: 460px;         position: absolute;         left: 0;         top: 0;         opacity: 0;         transition: all 2s;        }          .slider-box .images a.active{            opacity: 1;        }          .slider-box .images a img{            width: 100%;            height: 100%;            display: block;        }        .slider-box .nav{            position: absolute;            left: 0;            top: 195px;            width: 100%;            /* background-color: red; */            padding: 0 10px;            /* height: 100px; */        }        .slider-box .nav a{            background-image: url(img/icons.png);            width: 41px;            height: 69px;            display: inline-block;            background-repeat: no-repeat;        }        .slider-box .nav .prev{            background-position: -84px 0;        }        .slider-box .nav .prev:hover{            background-position: 0 0;        }        .slider-box .nav .next{            background-position: -125px 0;            float: right;        }        .slider-box .nav .next:hover{            background-position: -42px 0;        }        .slider-box .pages{            position: absolute;            right: 20px;            bottom: 25px;            font-size: 0;            width: 1186px;            text-align: center;            /* background-color: rebeccapurple; */        }        .slider-box .pages .dot{            display: inline-block;            width: 10px;            height: 10px;            border-radius: 50%;            background-color: rgba(0,0,0,0.4);            margin-right: 10px;        }        .slider-box .pages .dot:hover{         background-color: yellow;        }        .slider-box .pages .dot.active{         background-color: yellow;        }   </style>

2.html代码

<div class="slider-box">         <div class="images">             <!-- 以后哪张图片要想显示了，只需要添加一个             active类就行 -->             <a href="#" class="active">                 <img src="img/1.jpg" alt="">             </a>             <a href="#" >                 <img src="img/2.jpg" alt="">             </a>             <a href="#" >                 <img src="img/3.jpg" alt="">             </a>             <a href="#" >                 <img src="img/4.jpg" alt="">             </a>             <a href="#" >                 <img src="img/5.jpg" alt="">             </a>         </div>         <div class="nav">             <a href="javascript:;" class="prev" title="前一张"></a>             <a href="javascript:;" class="next" title="下一张"></a>         </div>         <div class="pages">             <a href="javascript:;" class="dot active"></a>             <a href="javascript:;" class="dot"></a>             <a href="javascript:;" class="dot"></a>             <a href="javascript:;" class="dot"></a>             <a href="javascript:;" class="dot"></a>         </div> </div>

3.js代码

<script>         // 定时器切换图片的功能         var images = document.querySelectorAll('.images a')         var index = 0 //定义要播放的图片的索引         var pages = document.querySelectorAll(".dot")         var prev = document.querySelector(".prev")         var next = document.querySelector(".next")         // 根据索引值切换图片         // 找到images的a标签，添加active这个类         function showImage(idx){             images.forEach(function(v,i){                 // idx = 1                 // i = 0 1 2 3 4                 if(i===idx){                   v.classList.add('active')                 //控制对应点高亮                   pages[i].classList.add("active")                   }else{                     v.classList.remove('active')                     pages[i].classList.remove("active")                 }             })         }     //   showImage(3)       prev.onclick = function(){         if(index===0){             index = images.length - 1// 4         }else{             index = index - 1         }         showImage(index)     }     next.onclick = function(){         if(index===images.length-1){             index = 0         }else{             index+=1         }         showImage(index)     }     var timer = setInterval(function(){         // 定时器控制图片的切换和点击下一张的功能一样         // 调用下一张的点击操作         next.click()// 模拟next的点击操作     },3000) </script>

感谢各位的阅读！关于“JavaScript如何实现轮播图”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！