平时我们会在各种网站看见图片轮播的效果，但它具体是如何实现的呢？接下来咱们一起来看看各种图片轮播效果的产生过程吧！
一、图片的无缝滚动
什么是图片的无缝滚动？通俗来讲就是一堆图片一张接着一张往过滑，图片之间没有缝隙产生。这也是最简单的一种轮播方式。
d1中放图片的路径，d4中和d1放置相同的图片是为了使轮播更加的流畅。
二、淡入淡出图片轮播：
每次展示一张图片，其余图片都在当前展示的图片背后，按顺序依次出现。当鼠标进入图片，会出现左右两个箭头，点击箭头可切换图片。图片上的小圆圈，只要鼠标进入就会变色并且切到当前圆圈对应的图片上。
<script>var time; //接受定时器var apar=document.getElementsByClassName("a")[0];var bpar=document.getElementsByClassName("b")[0];var dianpar=document.getElementsByClassName("dian")[0];var nowcolor=dianpar.children[0]; //存储当前变色的点元素（初始值）var btnleft=document.getElementsByClassName("btnleft")[0];var btnright=document.getElementsByClassName("btnright")[0];//调整层的位置for(var i=0;i<apar.children.length;i++){apar.children[i].style.zIndex=apar.children.length-i-1;}function countAnimate(num){for(var k=0;k<num;k++){for(var i=0;i<apar.children.length;i++){var index=apar.children[i].style.zIndex;index++;if(index==apar.children.length){index=0;apar.children[i].className="imgop";dianpar.children[i].className="";}if(index==apar.children.length-1){apar.children[i].className="imgopshow";dianpar.children[i].className="dbg"; //当前元素变色nowcolor=dianpar.children[i]; //存储当前已经变色的这个元素}apar.children[i].style.zIndex = index;}}}timerun();function timerun(){time=setInterval(function(){countAnimate(1);},2000)}bpar.onmouseenter=function(){clearInterval(time);}bpar.onmouseleave=function(){timerun();}for(var i=0;i<dianpar.children.length;i++){dianpar.children[i].index=i;dianpar.children[i].onmouseenter=function(){nowcolor.className=""; //把类名称清掉this.className="dbg";var num=0if(this.index-nowcolor.index>0){num=this.index-nowcolor.index;}else{num=dianpar.children.length-Math.abs(this.index-nowcolor.index);}countAnimate(num);nowcolor=this; //当前用户点击的值作为上一次颜色变化存下来}}// 处理浏览器的默认选择document.onselectstart=function(){return false;}btnleft.onclick=function(){countAnimate(7);}btnright.onclick=function(){countAnimate(1);}</script>
三、立体轮播：
使图片按如下效果依次展现:
// 存储第一个点的相关样式属性dianchild[0].style.backgroundColor="black";var time;var windowblur=true;ImageSlider();function ImageSlider(){time=setInterval(function(){imageAnimate("left",0);},1500);}function imageAnimate(direction,cindex){var firstimg={left:window.getComputedStyle(divpar[cindex]).left,top:window.getComputedStyle(divpar[cindex]).top,zIndex:window.getComputedStyle(divpar[cindex]).zIndex,backcolor:window.getComputedStyle(dianchild[cindex]).backgroundColor};if(direction=="left"){for(var i=0;i<divpar.length;i++){if(i==divpar.length-1){divpar[i].style.left=firstimg.left;divpar[i].style.top=firstimg.top;divpar[i].style.zIndex=firstimg.zIndex;dianchild[i].style.backgroundColor=firstimg.backcolor;}else{divpar[i].style.left=window.getComputedStyle(divpar[i+1]).left;divpar[i].style.top=window.getComputedStyle(divpar[i+1]).top;divpar[i].style.zIndex=window.getComputedStyle(divpar[i+1]).zIndex;dianchild[i].style.backgroundColor=window.getComputedStyle(dianchild[i+1]).backgroundColor;}}}else{for(var i=divpar.length-1;i>=0;i--){if(i==0){divpar[i].style.left=firstimg.left;divpar[i].style.top=firstimg.top;divpar[i].style.zIndex=firstimg.zIndex;dianchild[i].style.backgroundColor=firstimg.backcolor;}else{divpar[i].style.left=window.getComputedStyle(divpar[i-1]).left;divpar[i].style.top=window.getComputedStyle(divpar[i-1]).top;divpar[i].style.zIndex=window.getComputedStyle(divpar[i-1]).zIndex;dianchild[i].style.backgroundColor=window.getComputedStyle(dianchild[i-1]).backgroundColor;}}}firstimg=null;}document.onselectstart=function(){return false;};var block=document.getElementsByClassName("block")[0];var btn=document.getElementsByClassName("btn")[0];block.onmouseenter= function () {clearInterval(time);for(var i=0;i<btn.children.length;i++){btn.children[i].className=i==0?"marleft":"marright";}};block.onmouseleave=function(){if(windowblur){ImageSlider();for(var i=0;i<btn.children.length;i++){btn.children[i].className="";}for (var k = 0; k < divpar.length; k++) {divpar[k].style.transitionDuration = "0.5s";}}};btn.children[0].onclick=function(e){if(e.detail == 1){imageAnimate("left",0);}};btn.children[1].onclick=function(e){if(e.detail == 1){imageAnimate("right",divpar.length-1)}};
//底下点点的事件for(var i=0;i<dianchild.length;i++){dianchild[i].index=i;dianchild[i].onclick=function(){// 修改图片的过渡时间加快动画的进程 防止多张同时动for (var k = 0; k < divpar.length; k++) {divpar[k].style.transitionDuration = "0.1s";}//获取之前黑色点的索引，写rgb值时注意有空格的问题（格式必须保持统一，不能写black)var oldindex=0;for(var k=0;k<dianchild.length;k++){if(dianchild[k].style.backgroundColor=='rgb(0, 0, 0)'){oldindex=dianchild[k].index;}}var num=0; //用来判断一共转多少次/*如果当前索引大于之前索引 从left到right转 ("right",5)如果当前索引小于之前索引 从right到left转 (left,0)*/if(this.index>oldindex){num=this.index-oldindex;var timegoright=setInterval(function(){num--;if(num<0){clearInterval(timegoright)}else{imageAnimate("right",divpar.length-1);}},100)}else{num=Math.abs(this.index-oldindex);var timegoleft=setInterval(function(){num--;if(num<0){clearInterval(timegoleft)}else{imageAnimate("left",0);}},100)}}}document.addEventListener("visibilitychange",function(){if(document["hidden"]){clearInterval(time);}else{ImageSlider();}})
这里最后用到的这个方法是用来处理直接用AIt+Tab键切出轮播页面进入其他页面时计时器不停止的问题。
