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="//images0.cnblogs.com/i/386011/201403/292153222974220.jpg" alt=""></a></li>
<li><a href=""><img src="//images0.cnblogs.com/i/386011/201403/292153150002983.jpg" alt=""></a></li>
<li><a href=""><img src="//images0.cnblogs.com/i/386011/201403/292153066259174.jpg" alt=""></a></li>
<li><a href=""><img src="//images0.cnblogs.com/i/386011/201403/292152557505797.gif" alt=""></a></li>
<li><a href=""><img src="//images0.cnblogs.com/i/386011/201403/292152484534559.jpg" alt=""></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="//images0.cnblogs.com/i/386011/201403/292152484534559.jpg" alt=""></a></li>
<li><a href=""><img src="//images0.cnblogs.com/i/386011/201403/292152557505797.gif" alt=""></a></li>
<li><a href=""><img src="//images0.cnblogs.com/i/386011/201403/292153066259174.jpg" alt=""></a></li>
<li><a href=""><img src="//images0.cnblogs.com/i/386011/201403/292153150002983.jpg" alt=""></a></li>
<li><a href=""><img src="//images0.cnblogs.com/i/386011/201403/292153222974220.jpg" alt=""></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>
