轮播图，是网站首页中常见的一种图片切换特效，作为前端开发者，我相信很多开发者都直接调用了Jquery中的封装好的方法实现图片轮播，省事简单。所以我想介绍一下javascript纯代码实现的图片轮播。
HTML
<div> <ul> <li><img src="https://www.jb51.net/img/5.jpg"/></li> <li><img src="https://www.jb51.net/img/1.jpg"/></li> <li><img src="https://www.jb51.net/img/2.jpg"/></li> <li><img src="https://www.jb51.net/img/3.jpg"/></li> <li><img src="https://www.jb51.net/img/4.jpg"/></li> <li><img src="https://www.jb51.net/img/5.jpg"/></li> <li><img src="https://www.jb51.net/img/1.jpg"/></li> </ul> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> <div> <ul> <li><img src="https://www.jb51.net/img/5.jpg"/></li> <li><img src="https://www.jb51.net/img/1.jpg"/></li> <li><img src="https://www.jb51.net/img/2.jpg"/></li> <li><img src="https://www.jb51.net/img/3.jpg"/></li> <li><img src="https://www.jb51.net/img/4.jpg"/></li> <li><img src="https://www.jb51.net/img/5.jpg"/></li> <li><img src="https://www.jb51.net/img/1.jpg"/></li> </ul> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div>
这里我相信最多疑惑的是，明明五张图片为何要在首尾加两张图片(li)做首尾呼应呢？原因如下图：
这里以向左滚动的例子为说明
一开始布局的时候left: -470px;先处于第2个li也就是第2张图，当我们图片陆续向左滚动到第7张图片的时候，迅速扯回到第2张图，然后还是继续向左滚动。这样看起来就像是假象式的无限向左滚动循环，其实它里面只有7张图组成。同样的，如果实现向右滚动，我们一开始布局的时候，先处于第1个li也就是第1张图，当我们图片陆续向右滚动到第6张图片的时候，迅速扯回到第1张图，然后还是继续向右滚动。其实上下滚动轮播图道理是一样的，只不过少了一个float:left属性，让li垂直排列。
CSS
*{ margin: 0; padding: 0; list-style: none; } span{ width: 20px; height: 20px; display: block; background-color: blanchedalmond; border: 1px solid black; float: left; text-align: center; line-height: 20px; z-index: 1; cursor: pointer; margin: 120px 8px 0 0; } span.mouseover{ background-color: orange; } #content_img1{ position: relative; width: 470px; height: 150px; border: 2px black solid; margin: 30px auto; overflow: hidden; } #img1{ position: absolute; top: 0px; left: -470px; z-index: -1; width: 700%; height: 150px; } #img1>li{ width: 470px; height: 150px; float: left; } #content_img2{ position: relative; width: 470px; height: 150px; border: 2px black solid; margin: 30px auto; overflow: hidden; } #img2{ position: absolute; top: -150px; left: 0px; z-index: -1; width: 470px; height: 700%; } #img2>li{ width: 470px; height: 150px; }
javascript函数方法
window.onload=function(){ var cont_img1=document.getElementById("content_img1"); var spannum1=cont_img1.getElementsByTagName("span"); var img1=document.getElementById("img1"); var cont_img2=document.getElementById("content_img2"); var spannum2=cont_img2.getElementsByTagName("span"); var img2=document.getElementById("img2"); //向左轮播图的span"按钮"鼠标经过事件 for(var i=0;i<spannum1.length;i++){ spannum1[i].index=i; spannum1[i].onmouseover=function(){ for(var p=0;p<spannum1.length;p++){ if(spannum1[p]==this){ spannum1[p].className="mouseover"; }else{ spannum1[p].className=""; } } clearTimeout(img1.timer1); now=this.index; scrollimg1(img1,spannum1); } } //向左轮播的主函数调用 scrollimg1(img1,spannum1); //向上轮播图的span"按钮"鼠标经过事件 for(var i=0;i<spannum2.length;i++){ spannum2[i].index=i; spannum2[i].onmouseover=function(){ for(var p=0;p<spannum2.length;p++){ if(spannum2[p]==this){ spannum2[p].className="mouseover"; }else{ spannum2[p].className=""; } } clearTimeout(img2.timer1); nows=this.index; scrollimg2(img2,spannum2); } } //向上轮播的主函数调用 scrollimg2(img2,spannum2); } var now=1; function scrollimg1(obj,spannum1){ if(obj.offsetLeft<=-(obj.children.length-1)*obj.children[0].offsetWidth){//达到极限的计算位置，既是最后一个图就马上扯回初始位置 now=0; obj.style.left=-(++now)*obj.children[0].offsetWidth+"px"; }else{ Move(obj,-obj.children[0].offsetWidth*(++now),"left",5,30);//否则图片进行向左运动的缓冲动画 } for(var i=0;i<spannum1.length;i++){ spannum1[i].className=""; } spannum1[(now-1)%spannum1.length].className="mouseover"; obj.timer1=setTimeout(function(){//每3秒钟进行函数的回调，实现无限循环的图片轮播 scrollimg1(obj,spannum1); },3000); } var nows=1; function scrollimg2(obj,spannum2){ if(obj.offsetTop<=-(obj.children.length-1)*obj.children[0].offsetHeight){//达到极限的计算位置，既是最后一个图就马上扯回初始位置 nows=0; obj.style.top=-(++nows)*obj.children[0].offsetHeight+"px"; }else{ Move(obj,-obj.children[0].offsetHeight*(++nows),"top",5,30);//否则图片进行向左运动的缓冲动画 } for(var i=0;i<spannum2.length;i++){ spannum2[i].className=""; } spannum2[(nows-1)%spannum2.length].className="mouseover"; obj.timer1=setTimeout(function(){//每3秒钟进行函数的回调，实现无限循环的图片轮播 scrollimg2(obj,spannum2); },3000); } function Move(obj,target,stylename,average,cycle,continuefunction){参数类型:(对象，目标值，改变的样式属性，缓冲系数(速度与大小成反比)，周期时间(速度与大小成反比),回调函数(可有可无)) clearInterval(obj.timer); obj.timer=setInterval(function(){ if(stylename=="opacity"){ var offvalue=Math.round(parseFloat(getStyle(obj,stylename))*100); var speed=(target-offvalue)/average; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(speed==0){ clearInterval(obj.timer); if(continuefunction) continuefunction(); }else{ obj.style[stylename]=(offvalue+speed)/100; obj.style.filter="alpha(opacity:"+(offvalue+speed)+")"; } }else{ var offvalue=parseInt(getStyle(obj,stylename)); var speed=(target-offvalue)/average; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(speed==0){ clearInterval(obj.timer); if(continuefunction) continuefunction(); }else{ obj.style[stylename]=offvalue+speed+"px"; } } },cycle); } function getStyle(obj,stylename){//对象样式属性大小获取函数 if(obj.currentStyle){ return obj.currentStyle[stylename]; }else if(getComputedStyle(obj,false)){ return getComputedStyle(obj,false)[stylename]; } }