纯JS实现轮播图特效——详解

 ??<div id="slider"> ???????????????????????<div id="sliderImgs"> ???????????????<img src="img/mi04.jpg" width="1000px"/> ???????????????????????????????<img src="img/mi01.jpg" width="1000px" title="oneImg"/> ???????????????<img src="img/mi02.jpg" width="1000px" title="twoImg"/> ???????????????<img src="img/mi03.jpg" width="1000px" title="threeImg"/> ???????????????<img src="img/mi04.jpg" width="1000px" title="fourImg"/> ???????????????????????????????<img src="img/mi01.jpg" width="1000px"/> ???????????????????????????????<!--因为要做无缝滚动，所以要克隆第一张和最后一张，放到最后一张后面和最前面--> ???????????</div> ???????????????????????<div id="buttons"> ???????????????<ul> ???????????????????<li class="active"></li> ???????????????????<li></li> ???????????????????<li></li> ???????????????????<li></li> ???????????????</ul> ???????????</div>
 ???????????<div> ???????????????<span id="prev">&lt;</span> ???????????????<span id="next">&gt;</span> ???????????</div>
 ???????</div> ???????

<style type="text/css"> ???????????*{ ???????????????margin: 0; ???????????????padding: 0; ???????????} ???????????/*禁止html元素别被鼠标选中,必须要写不然会有bug,--start*/ ???????????*{ ???????????????moz-user-select: -moz-none; ???????????????-moz-user-select: none; ???????????????-o-user-select:none; ???????????????-khtml-user-select:none; ???????????????-webkit-user-select:none; ???????????????-ms-user-select:none; ???????????????user-select:none; ???????????} ???????????????/*禁止html元素别被鼠标选中--end*/ ???????????????????????#slider{ ???????????????width: 1000px; ???????????????/*设置为图片宽度*/ ???????????????height: 376px; ???????????????/*设置为图片高度*/ ???????????????margin: 0 auto; ???????????????margin-top: 100px; ???????????????overflow: hidden; ???????????????position: relative; ???????????????/*border: 2px solid palegreen;*/ ???????????} ???????????#sliderImgs{ ???????????????width: 600%; ???????????????/*几张图片就是 ?6*100% ?*/ ???????????????position: absolute; ???????????/*必须设置绝对定位，才能使用left属性*/ ???????????????left: -1000px; ???????????????/*把第一张假图偏移出去*/ ???????????????????????????????????/*border: 1px solid blue;*/ ???????????} ???????????#sliderImgs img{ ???????????????float: left; ???????????} ???????????????????????????????????#buttons{ ???????????????width: 70px; ???????????????position: absolute; ???????????????z-index: 1; ???????????????/*设置图片堆叠属性，仅限于定位的元素使用。默认值为0，值越大，优先级越高*/ ???????????????bottom: 10px; ???????????????left: 45%; ???????????????background-color: rgba(255,255,255,0.4); ???????????????????????????????padding-top: 4px; ???????????????padding-bottom: 4px; ???????????????border-radius: 9px; ???????????????????/*高度一半 = 8px + 10px (li的height) */ ???????????????/*border: 2px solid red;*/ ???????????} ???????????#buttons ul{ ???????????????list-style-type: none; ???????????} ???????????#buttons ul li{ ???????????????float: left; ???????????????margin-left: 6px; ???????????????width: 10px; ???????????????height: 10px; ???????????????line-height: 10px; ???????????????border-radius: 100%; ???????????????background-color: #FFFFFF; ???????????} ???????????#buttons ul li:hover{ ???????????????cursor: pointer; /*手型光标*/ ???????????????background-color:#FF5000; ???????????} ???????????#buttons .active{ ???????????????background-color: #FF5000; ???????????} ???????????#next , #prev{ ???????????????position: absolute; ???????????????z-index: 1; ???????????????top: 43%; ???????????????color: rgba(255,255,255,.9); ???????????????font-family: "微软雅黑"; ???????????????font-size: 25px; ???????????????text-align: center; ???????????????display: block; ???????????????width: 40px ; ???????????????height: 40px; ???????????????line-height: 40px; ???????????????border-radius: 100%; ???????????????background-color: rgba(0,0,0,.4); ???????????????transition: width 0.3s ,height 0.3s ,line-height 0.3s ,border-radius 0.3s, text-align 0.3s ,ease 0.3s ; ???????????} ???????????#prev{ ???????????????left: 5%; ???????????} ???????????#next{ ???????????????right: 5%; ???????????} ???????????#next:hover{ ???????????????cursor: pointer; /*手型光标*/ ???????????????????????????????width: 44px; ???????????????height: 44px; ???????????????line-height: 44px; ???????????????border-radius:100%; ???????????????text-align: center; ???????????} ???????????#prev:hover{ ???????????????cursor: pointer; /*手型光标*/ ???????????????????????????????width: 44px; ???????????????height: 44px; ???????????????line-height: 44px; ???????????????border-radius:100% ; ???????????????text-align: center; ???????????} ???????</style>

<script type="text/javascript"> ???????????var doc = document; ???????????var sliderId = doc.getElementById(‘slider‘); ???????????var sliderImgsId = doc.getElementById(‘sliderImgs‘); ???????????var imgs = sliderImgsId.getElementsByTagName(‘img‘); ???????????var btnLi = doc.getElementById(‘buttons‘).getElementsByTagName(‘li‘); ???????????var btnPrev = doc.getElementById(‘prev‘); ???????????var btnNext = doc.getElementById(‘next‘); ???????????????????????var imgsLength = imgs.length-2; ???????????????????//减去2个假图 ???????????var btnLiLength = btnLi.length; ???????????var imgWidth = sliderId.clientWidth; ???????????//获取图片宽度 ???????????var imgAnimateTimer = null; ???????????????????????//图片animate定时器 ???????????var aotuPlayTimer = null; ???????????????????????//自动播放定时器 ???????????var index = 0; ???????????????????????????????????//当前图片默认为第一张 ???????????var speed = 0; ?????????????????????????????????//动画速度,这个数必须是能被图片宽度500整除的。正负表示偏移方向 ???????????????????????/*非常重要*/ ???????????var isAnimate = false; ???????????????????????????//图片是否在动画状态。若在动画状态，此时动画没结束， 则不执行下一个动画。 ???????????sliderImgsId.style.left = -imgWidth+"px"; ???????//初始化为第一张真图 ???????????????????????btnPrev.onclick = function(){ ???????????????if(isAnimate == false){ ???????//图片不在动画状态才执行 ???????????????????imgAnimate(imgWidth); ???????????????????index--; ???????????????????if(index<0){ ???????????????????????index = imgsLength-1; ???????????????????} ???????????????????selectBtn(); ???????????????} ???????????} ???????????btnNext.onclick = function(){ ???????????????if(isAnimate == false){ ???????????????????imgAnimate(-imgWidth); ???????????????????index++; ???????????????????if(index>imgsLength-1){ ???????????????????????index = 0; ???????????????????} ???????????????????selectBtn(); ???????????????} ???????????} ???????????????????????????????????????????????for(var i = 0 ; i<btnLiLength;i++){ ???????????????btnLi[i].index = i; ???????????????btnLi[i].onclick = function(){ ???????????????????var toTargetImgOffset = (index - this.index)*imgWidth; ???//负数sliderimgsId向左偏转，反之，向右 ???????????????????if(toTargetImgOffset == 0){return;} ???????????????????????????????????????if(isAnimate == false){ ???????????????????????imgAnimate(toTargetImgOffset); ???????????????????????//方法的参数是局部参数 ???????????????????????index = this.index; ???????????????????????selectBtn(); ???????????????????} ???????????????????????????????????????????????????????} ???????????} ???????????????????????function selectBtn(){ ???????????????for(var i = 0; i < btnLiLength; i++){ ???????????????????if(btnLi[i].className == "active"){ ???????????????????????btnLi[i].className = ""; ???????????????????????break; ???????????????????} ???????????????} ???????????????btnLi[index].className = ‘active‘; ????????????} ???????????????????????????????????/*动画函数*/ ???????????function imgAnimate(offset){ ???????????????var newLeft = parseInt(sliderImgsId.style.left) + offset; ???????????//sliderImgsId.style.left永远获取都是当前图片偏移量 ???????????????var allTime = 400; ???????????????????????????????????????????????????//完成offset偏移量，总共所用时间。offset路程一定，时间越短，速度越快。此时间必须小于autoPlay间隔时间，否则，图片运动还没结束，ImgAnimate()再次被调用 ???????????????var interval = 20; ???????????????????????????????????????????????????//定时器的间隔时间，值越小越好，因为越大，动画越卡 ???????????????var speed = offset/(allTime/interval); ???????????????????????????????//speed正负由offset决定 ???????????????????????????????isAnimate = true; ???????????????????????????????????????????????????//图片动画开始 ???????????????clearInterval(imgAnimateTimer); ???????????????imgAnimateTimer = setInterval(function(){ ???????????????????sliderImgsId.style.left = parseInt(sliderImgsId.style.left)+speed +"px"; ???????????????????/* 第一种情况：当speed<0时,(即图片向左运动时) ????????????????????* 如果当前图片left值 , left只会越来越小 , 当小于等于newLeft , 则停止图片运动 ????????????????????* 第二种情况：当speed>0时,(即图片向右运动时) ????????????????????* 如果当前图片的left , left只会越来越大 , 大于等于newLeft , 则停止图片运动 ????????????????????* */ ???????????????????if( speed<0 && parseInt(sliderImgsId.style.left)<= newLeft || speed>0 && parseInt(sliderImgsId.style.left) >= newLeft){ ???????????????????????clearInterval(imgAnimateTimer); ???????????????????//到达指定newleft位置停止动画 ???????????????????????isAnimate = false; ???????????????????????????????//动画执行结束 ???????????????????????????????????????????????/*重新定位-- 让图片无限循环 --start*/ ???????????????????????if(newLeft > -imgWidth){ ???????????????????????????sliderImgsId.style.left = -imgsLength*imgWidth +"px" ; ???????????????????????????return; ???????????????????????} ???????????????????????if(newLeft < -imgsLength*imgWidth){ ???????????????????????????????????????????sliderImgsId.style.left = -imgWidth +"px" ; ???????????????????????????return; ???????????????????????} ???????????????????????sliderImgsId.style.left = newLeft+"px"; ???????????????????????/*重新定位-- ?让图片无限循环 ?--end*/ ???????????????????????????????????????????????/*图片运动结束后。清除上一次定时器时间*/ ???????????????????????window.onload(); ???????????????????} ???????????????},interval); ???????????} ???????????????????????????????????window.onload = function(){ ???????????????if(isAnimate==false){ ???????????????????clearInterval(aotuPlayTimer); ???????????????????aotuPlayTimer = setInterval(function(){ ???????????????????????btnNext.onclick(); ???????????????????},5000); ???????????????????????????????//图片每格5s移动一次 ???????????????} ???????????} ???????????/*鼠标移入sliderId事件*/ ???????????sliderImgsId.onmouseover = function(){ ???????????????clearInterval(aotuPlayTimer); ???????????} ???????????/*鼠标移出sliderId事件*/ ???????????sliderImgsId.onmouseout =function(){ ???????????????window.onload(); ???????????} ????????????</script>