JS实战002:带点选的滑动轮播图
1、前面我们已经实现了在设置好的时间间隔内对图片进行自动轮播，然后点击左右箭头进行图像的切换，当鼠标移入/移出控制轮播图的停止/继续，现在我们新增一个页码（有时候只是个按钮）。
3、当然我们也可以通过获取img的数量动态生成页码数量，首先我们需要先获取page元素，然后在page下动态添加span标签，默认第一个span给定一个class，给这个输定定义一个背景色，当我切换页码时把这个class属性动态赋给对应的span标签。
5、我写了一个showPage函数，然后把这个函数加入到animate方法中，当执行animate时就会触发showPage方法了，这样每次点击切换按钮的时候页码就会随之变换，加上自动属性这样就可以直接载入时就自动切换了，但是现在点击或者将鼠标移入标签还是无法切换到指定的页面，接下来我们开始实现这个功能。
7、通过以上的新增我们就得到了前面的演示效果了，下面是完整的代码，有兴趣的可以试试：<!DOCTYPE 茑霁酌绡html><html><head> <meta charset="utf-8"> <title>Picture Carousel</title> <style type="text/css"> *{ margin:0; padding:0; } a{ text-decoration: none; } .Carousel{ position: relative; width:600px; height:400px; margin:50px auto; overflow: hidden; border:10px solid rgba(189, 184, 184,0.5); z-index: 1; } #picture{ position: absolute; width: 2400px; height: 400px; } #picture img{ float: left; width:600px; height:400px; } .Carousel .page{ position: absolute; left:50%; transform: translateX(-50%); bottom: 30px; height: 10px; z-index: 2; } .Carousel .page span{ display: inline-block; width:30px; line-height: 30px; width: 30px; margin-left:20px; text-align: center; font-weight: 900; color:white; background: rgba(111, 112, 112,0.6); cursor: pointer; } .Carousel .page span.show{ background-color: rgb(15, 151, 241); } .Carousel .arrow{ cursor: pointer; position:absolute; top:40%; padding:10px 15px; background-color: rgba(255, 255, 255,0.8); display: inline-block; font-size: 50px; z-index: 2; color:rgb(161, 157, 157); font-weight: bold; display: none; } .Carousel .arrow_left{ left:0; } .Carousel .arrow_right{ right: 0; } .Carousel:hover .arrow{ display: block; } .Carousel .arrow:hover{ background-color: rgb(15, 151, 241); font-weight: bold; color:white; } </style></head><body> <div class="Carousel"> <div id="picture"> <img src="../src/assets/images/1.png" alt=""> <img src="../src/assets/images/2.png" alt=""> <img src="../src/assets/images/3.png" alt=""> <img src="../src/assets/images/1.png" alt=""> </div> <div class="page"> <span class="show">1</span> <span>2</span> <span>3</span> </div> <a href="javascript:;" class="arrow arrow_left"><</a> <a href="javascript:;" class="arrow arrow_right">></a> </div></body><script type="text/javascript"> var pic =document.getElementById('picture'); var next = document.querySelector(".arrow_right"); var prev = document.querySelector(".arrow_left"); var Carousel = document.querySelector(".Carousel"); var pages = document.getElementsByTagName('span'); var imgwidth=pic.children[0].offsetWidth; var move= 0 ; var index = 0; for(var i=0;i<pages.length;i++){ pages[i].onmouseover =function(){ move=this.innerHTML-1; index=move; if(move==pic.children.length-1){ move=0; pic.style.left=0+"px"; } animate(pic,-move*imgwidth); } } next.onclick=function(){ if(move==pic.children.length-1){ move=0; pic.style.left=0+"px"; } move++; animate(pic,-move*imgwidth); index++; if(index>2){ index=0; } console.log("index="+index) } prev.onclick=function(){ if(move==0){ move=pic.children.length-1; pic.style.left=-move*imgwidth+"px"; } move--; animate(pic,-move*imgwidth); index--; if(index<0){ index=2; } console.log("index="+index) } var timer = null; function autoPlay () { timer = setInterval(function () { next.onclick(); },2000); } autoPlay(); Carousel.onmouseenter = function () { clearInterval(timer); } Carousel.onmouseleave = function () { autoPlay(); } function animate(element,distance){ clearInterval(element,timer) element.timer=setInterval(function(){ var present=element.offsetLeft;//获取元素的当前的位置 var movement=10;//每次移动的距离 movement=present<distance?movement:-movement; present+=movement;//当前移动到位置 if(Math.abs(present-distance)>Math.abs(movement)){ element.style.left=present+"px" }else{ clearInterval(element.timer); element.style.left=distance+"px" } showPage () },10); } function showPage () { for(var i = 0;i < pages.length; i++){ pages[i].className = ''; } pages[index].className = 'show'; }</script></html>