纯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"><</span> <span id="next">></span> </div>
</div>
CSS部分
<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>
布局效果图：
JS部分
<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>
