Css样式内容
<style type="text/css"> *{margin: 0;padding: 0} li{list-style: none} img{border: 0} .ad{width: 800px;height:300px;margin:0 auto;overflow: hidden;position: relative;} .ad ul{width: 6000px;position: absolute;left: 0} .ad li{float: left;width: 800px;height: 300px;overflow: hidden} .ad li img{width: 100%;} .last,.next{width: 100px;height: 40px;line-height: 40px;text-align: center; color:#fff;background: #c4c4c4;border-radius: 10px;cursor: pointer} .deriction{ width: 800px; margin: 20px auto; } .fl{float: left} .fr{float: right} </style>
HTML结构
<div class="ad"> <ul class="content" style="left:0;"> <li><img src="one.jpg"></li> <li><img src="two.jpg"></li> <li><img src="three.jpg"></li> </ul> </div> <div class="deriction"> <div class="last fl"> 上一页 </div> <div class="next fr"> 下一页 </div> </div>
JS代码
var last = document.getElementsByClassName("last")[0]; var next = document.getElementsByClassName("next")[0]; var content = document.getElementsByClassName("content")[0]; var index = document.getElementsByTagName("li"); var cli = 0; function Tab(ele,Tele,direction,width){ } // Tab.prototype.change = function(ele,Tele,direction,width,o){ if(direction=="left"){ cli++; if(cli<Tele.length){ this.animate(o,-width*cli,ele); }else{ cli=0; this.animate(o,0,ele); } }else{ cli--; if(cli>=0){ this.animate(o,-(cli*width),ele); }else{ cli=Tele.length-1; this.animate(o,-width*(Tele.length-1),ele); } } } //轮播图的动态效果滚动的特效 Tab.prototype.animate = function(a,b,ele){ console.log(a,b,ele); if(a<b){ var time = setInterval(function(){ if(a<b){ if(b==0){ ele.style.left = (a+=10) +"px"; }else{ ele.style.left = (a+=10) +"px"; } }else{ clearInterval(time); } },5); }else if(a>b){ var tima = setInterval(function(){ if(a>b){ ele.style.left = (a-=10) +"px"; }else{ clearInterval(tima); } },5); } } var n = new Tab(); last.addEventListener('click',onLast,false); function onLast(){ var origin = parseInt(content.style.left); n.change(content,index,"right",800,origin);//创建新的对象 绑定上一页的动作 } next.addEventListener('click',onNext,false); function onNext(){ var origin = parseInt(content.style.left); n.change(content,index,"left",800,origin);//创建新的对象 绑定下一页的动作 }