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>

 

js 实现slider封装,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。