JavaScript实现轮播图案例

<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>

<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>

<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>