JS实现手动和自动轮播效果
开门见山，今天要实现的轮播效果如下图所示：(轮播自动播放；点击左右按钮实现上一张和下一张的功能；鼠标移入轮播暂停；鼠标移出轮播自动播放；小圆点随着图片的变化而变化，点击哪个小圆点回到哪张图片；底部显示第几张图片) 一、献上html及css html: <div class="pic"> <!--上一页--> <a id="prev" href="javascript:;"></a> <!--轮播图--> <img id="img" src="img/img1.jpg" alt=""> <!--小圆点--> <div class="circle"> <span class="active"></span> </div> <!--下一页--> <a id="next" href="javascript:;"></a> </div> <p id="txt">这是第 <span>1</span> 张图片</p> css: *{ margin: 0; padding: 0; }a{ text-decoration: none; }.wrap{ width: 1000px; height: 800px; background: url(img/bg.jpg) no-repeat; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); background-size: 100% 100%; } prev,#next{ position: absolute; width: 25px; height: 45px; background: url(img/ar.png) no-repeat; top: 155px; } prev{ left: 13px; } next{ transform: rotate(180deg); right: 13px; }.pic{ width: 536px; height: 356px; position: absolute; top: 170px; left: 50%; transform: translateX(-50%); }img{ vertical-align: top; width: 536px; height: 356px; } txt{ width: 536px; height: 71px; position: absolute; left: 50%; bottom: 185px; text-align: center; font: 20px/71px "微软雅黑"; color: #666; transform: translateX(-50%); }.circle{ text-align: center; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }.circle span{ border: 1px solid #fff; width: 5px; height: 5px; border-radius: 50%; display: inline-block; margin: 0 5px; cursor: pointer; }.circle span.active{ background-color: #fff; } 二，javaScript的实现 1，获取元素 let pic = document.querySelector('.pic');let prev = document.querySelector('#prev');let next = document.querySelector('#next');let txt = document.querySelector('#txt span');//轮播图数组let arr = ['img/img1.jpg','img/abc.jpg','img/img3.jpg','img/img4.jpg','img/img5.jpg'];let num = 0 ;let circle = document.querySelector('.circle');let img = document.querySelector('#img');let timer = null; 2，渲染并获取小圆点 //渲染轮播图上的小圆点for(let i = 0;i circle.innerHTML+=`<span></span>` }let circleAll = document.querySelectorAll('.circle span'); 3，轮播时需要调用的函数 //轮播函数let loop = (addNum,flag)=>{ num = num+addNum; if(flag){ if(num == arr.length){ num = 0; } }else{ if(num < 0){ num = arr.length-1; } } for(let i = 0;i<circleAll.length;i++){ circleAll[i].classList.remove('active'); } circleAll[num].classList.add('active'); img.src = arr[num]; txt.innerHTML= num+1; }; 4，进入页面时自动播放轮播 //定时器let auto = ()=>{ timer = setInterval(()=>{ let addNum =1; let flag = true; loop(addNum,flag); },1000); };//进入页面时自动轮播auto(); 5，鼠标的移入移出 //鼠标移入清除定时器pic.onmouseover=function () { clearInterval(timer); };//鼠标移出启动定时器pic.onmouseout =function () { auto(); }; 6，实现上一张及下一张功能 //下一张next.onclick = function () { let addNum = 1; let flag = true; loop(addNum,flag); };//上一张prev.onclick = function () { let addNum = -1; let flag = false; loop(addNum,flag); }; 7，实现点击小圆点切换图片的功能 //点击圆点切换图片circleAll.forEach((item,index)=>{ item.onclick=function () { img.src = arr[index]; txt.innerHTML= index+1; for(let i = 0;i<circleAll.length;i++){ circleAll[i].classList.remove('active'); } circleAll[index].classList.add('active'); //num赋值为index,使鼠标移出后图片播放从当前的图片开始 继续自动轮播 num = index; } }) 整个轮播的功能就实现，欢迎大家交流
