js 实现slider封装
1)记得动画类代码要在启动新的动画时删除旧的动画
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>淘宝首页图片轮播效果</title> <style> <!-- * {margin: 0;padding:0;} body {background: #222;} ol {list-style: none;} img {border: 0 none;} #slider,#sliderVertical { border: 1px solid #F60; width: 490px; height: 170px; overflow: hidden; position: relative; margin: 2em auto; } #slider .player { /*width: 2450px; height: 850px;*/ position: absolute; top: 0px; left: 0px; width:2450px; } #sliderVertical .player{ position: absolute; top: 0px; left: 0; } #slider .player li,#sliderVertical .player li { float:left; width: 490px; height: 170px; } #slider .btns,#sliderVertical .btns { position: absolute; right: 10px; bottom: 5px; height: 30px; } #slider .btns li,#sliderVertical .btns li { font: 13px Tahoma, Arial, 宋体, sans-serif; float: left; margin: 0 3px; border: 1px solid #F60; background-color: #FFF; color: #CC937A; opacity: .8; cursor: pointer; width: 20px; height: 20px; line-height: 19px; text-align: center; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } #slider .btns li.active ,#sliderVertical .btns li.active{ background: #F60; color: #FFF; font-weight: bold; opacity: 1; } --> </style> <body> <div id="slider"> <ol class="player"> <li><a href=""><img src="http://images.cnitblog.com/i/386011/201403/292153222974220.jpg" ></a></li> <li><a href=""><img src="http://images.cnitblog.com/i/386011/201403/292153150002983.jpg" ></a></li> <li><a href=""><img src="http://images.cnitblog.com/i/386011/201403/292153066259174.jpg" ></a></li> <li><a href=""><img src="http://images.cnitblog.com/i/386011/201403/292152557505797.gif" ></a></li> <li><a href=""><img src="http://images.cnitblog.com/i/386011/201403/292152484534559.jpg" ></a></li> </ol> <ol class="btns"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div> <div id="sliderVertical"> <ol class="player"> <li><a href=""><img src="http://images.cnitblog.com/i/386011/201403/292152484534559.jpg" ></a></li> <li><a href=""><img src="http://images.cnitblog.com/i/386011/201403/292152557505797.gif" ></a></li> <li><a href=""><img src="http://images.cnitblog.com/i/386011/201403/292153066259174.jpg" ></a></li> <li><a href=""><img src="http://images.cnitblog.com/i/386011/201403/292153150002983.jpg" ></a></li> <li><a href=""><img src="http://images.cnitblog.com/i/386011/201403/292153222974220.jpg" ></a></li> </ol> <ol class="btns"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div> </body> <script> function animate(o,start,alter,dur,fx) { /* * 功能说明: * 设置动画 * o:要设置动画的对象 * start:开始的对象 * alter:总的对象 * dur:动画持续多长时间 * fx:动画类型 */ var curTime=0; var t=setInterval(function () { if (curTime>=dur) clearInterval(t); for (var i in start) { o.style[i]=fx(start[i],alter[i],curTime,dur)+"px"; } curTime+=40; },40); return function () {clearInterval(t);}; }; var Tween = { /* * 功能说明: * 加速运动 * curTime:当前时间,即动画已经进行了多长时间,开始时间为0 * start:开始值 * alter:总的变化量 * dur:动画持续多长时间 */ Linear:function (start,alter,curTime,dur) {return start+curTime/dur*alter;},//最简单的线性变化,即匀速运动 Quad:{//二次方缓动 easeIn:function (start,alter,curTime,dur) { return start+Math.pow(curTime/dur,2)*alter; }, easeOut:function (start,alter,curTime,dur) { var progress =curTime/dur; return start-(Math.pow(progress,2)-2*progress)*alter; }, easeInOut:function (start,alter,curTime,dur) { var progress =curTime/dur*2; return (progress<1?Math.pow(progress,2):-((--progress)*(progress-2) - 1))*alter/2+start; } }, }; function $(id){ return document.getElementById(id); } function getByClass(className,context){ context=context||document; if(context.getElementsByClassName){ return context.getElementsByClassName(className); }else{ var nodes=[]; var tags=context.getElementsByTagName(‘*‘); for(var i=0,l=tags.length;i<l;i++){ if(hasClass(tags[i],className))nodes.push(tags[i]); } } return nodes; } function hasClass(node,className){ var names=node.className.split(/\s+/); for(var i=0,l=names.length;i<l;i++){ if(names[i]==className)return true; } return false; } function Slider(options){ /*参数说明: *player:要运行的图片容器,必须 *distance:图片位移,必须(垂直的话则为图片高度,水平的话则为图片宽度) *dur:动画时间,默认1500ms *btns:按钮数组,必须 *hoverClass:悬浮按钮样式,默认‘active’ *isVertical:true/false,默认垂直 *fx:动画效果,默认Tween.Quad.easeOut */ this.player=options.player; this.btns=options.btns; this.num=this.btns.length; this.distance=options.distance; this.dur=options.dur||1500; this.hoverClass=options.hoverClass||‘active‘; this.fx=options.fx||Tween.Quad.easeOut; this.isVertical=options.isVertical; this.current=0; this.intervalId=0; for(var i=0,l=this.btns.length;i<l;i++){ var t=this.btns[i]; t.index=i; var _this=this; t.onmouseover=function(){ _this.stop(); _this.invoke(this.index); } t.onmouseout=function(){ _this.startPlay(); } } }; Slider.prototype.next=function(){ this.invoke(this.current+1); }; Slider.prototype.stop=function(){ clearInterval(this.intervalId); } Slider.prototype.invoke=function(index){ this.btns[this.current].className=‘‘; this.current=index; if(this.current>=this.num)this.current=0; var startVal = parseInt(this.isVertical?this.player.style.top:this.player.style.left) || 0; var alterVal = (parseInt(-startVal - this.distance * this.current)); this.animateIterval && this.animateIterval();//修正快速切换时闪动 this.animateIterval=this.isVertical?animate(this.player,{top:startVal},{top:alterVal},1000,this.fx):animate(this.player,{left:startVal},{left:alterVal},1000,this.fx) this.btns[this.current%this.num].className=this.hoverClass; } Slider.prototype.startPlay=function(){ var _this=this; this.btns[this.current].className=this.hoverClass; this.intervalId=setInterval(function(){_this.next()},this.dur); } var options={}; var slider=$(‘slider‘); options.player=getByClass(‘player‘,slider)[0]; options.btns=getByClass(‘btns‘,slider)[0].getElementsByTagName(‘li‘); options.isVertical=false; options.distance=490; options.dur=2500; options.fx=Tween.Quad.easeInOut; var mySlider=new Slider(options); mySlider.startPlay(); var options={ player:getByClass(‘player‘,$(‘sliderVertical‘))[0], btns:getByClass(‘btns‘,$(‘sliderVertical‘))[0].getElementsByTagName(‘li‘), isVertical:true, dur:2500, distance:170 } var myVerticalSlider=new Slider(options); myVerticalSlider.startPlay(); </script> </html>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。