轮播图基本上是前端所必须面临的一个功能。而且在网上可以找到各种各样的插件或者写法。
但是我个人觉得还是写一下比较好。这里用到的是原生JS、CSS3相结合的写法。
对IE 8以下的兼容性不是太好。但相对于浏览器使用情况来说,还是可以的。
下边是css样式:
body{margin: 0;padding: 0;} img{border: none;vertical-align: middle;} .banner{width: 500px;height: 181px;overflow: hidden;margin: 100px auto 0;} .banner-conent a{display: block;text-decoration: none;float: left;} .banner-conent img{width: 500px;height: 181px;}
<div class="banner"> <div class="banner-conent"> <a href="#"> <img src="../image/livehouse@3x.png"> </a> <a href="#"> <img src="../image/livehouse@3x.png"> </a> <a href="#"> <img src="../image/livehouse@3x.png"> </a> </div> </div>
通过transitoinEnd事件对象来实现图片的切换。
var itcast={ /*transitoinEnd:事件对象,在 CSS 完成过渡后触发。*/ transitoinEnd:function(dom,fn){ if(dom && typeof dom ==='object'){ dom.addEventListener("webkitTransitionEnd",function(){ fn && fn(); }); dom.addEventListener("transitionEnd", function() { fn && fn(); } ) } } }
获取元素以及相关变量的声明:
var banner = document.querySelector(".banner");/*获取最外层元素*/ var imageBox=banner.querySelector(".banner-conent");/*获取父级元素*/ imageBox.style.width= 3*100+"%"; /*通过子级元素算出父级元素的宽度*/ var w=banner.offsetWidth; var index=0; var img_length = 3; /*添加过滤效果*/ var addTransition=function(){ imageBox.style.transition="all 0.5s"; imageBox.style.webkitTransition="all 0.5s"; }; /*移除效果*/ var removeTransition=function(){ imageBox.style.transition="none"; imageBox.style.webkitTransition="none"; } /*设置偏移量*/ var addTranslate=function(w){ imageBox.style.transform="translateX("+w+"px)"; imageBox.style.webkitTransform="translateX("+w+"px)"; }
开启定时器:
/*通过定时器来控制轮播速度*/ var timer=setInterval(function(){ addTransition(); index++; addTranslate(-index*w); },3000);
itcast.transitoinEnd(imageBox,function(){
if(index<0){
index=img_length;
removeTransition();
addTranslate(-index * w);
}
else if(index>=(img_length)){
index=0;
removeTransition();
addTranslate(-index * w);
}
});
添加左右滑动事件
var startX=0; var moveX=0; var distinceX=0; var isMove=false; /*左右滑动事件*/ imageBox.addEventListener("touchstart",function(event){ clearInterval(timer); startX=event.touches[0].clientX; }); imageBox.addEventListener("touchmove",function(event){ isMove=true; moveX=event.touches[0].clientX; distinceX=moveX-startX; var current=(-index*w)+distinceX; removeTransition(); addTranslate(current); }) imageBox.addEventListener("touchend",function(){ if(isMove && Math.abs(distinceX)>w/3){ if(distinceX>0){ index--; }else{ index++; } addTransition(); addTranslate(-index*w); }else{ addTransition(); addTranslate(-index*w); } timer=setInterval(function(){ index++; addTransition(); addTranslate(-index*w); },3000); })
通过上述代码,你会发现当轮播到最后一张时,会出现一个短暂的空白(BUG),这个时候,只需要再最后多添加一次第一张图片,同时修改父级元素的宽度和img_length即可实现无缝完美轮播!