• 两种轮播效果


    第一种:淡入淡出

    html 结构

    <div class="demo">
        <div id="adv-cont1" class="cont">
            <a data-index="0"><img src="../images/1.jpg" /></a>
            <a data-index="1"><img src="../images/2.jpg" /></a>
            <a data-index="2"><img src="../images/3.jpg" /></a>
            <a data-index="3"><img src="../images/4.jpg" /></a>
        </div>
        <div id="adv-tab1" class="tab">
            <span></span><span></span><span></span><span></span>
        </div>
    </div>

    css

    .demo{position: relative;width: 766px;margin: 20px auto;}
    .demo .cont{position: relative;width: 766px;height: 290px;}
    .demo .cont a{position: absolute;left: 0px;top: 0px;width: 766px;height: 290px;}
    .demo .cont a img{width: 766px;height: 290px;}
    .demo .tab{position: absolute;right: 0px;bottom: 0px;text-align: right;padding-bottom: 20px;padding-right: 10px;}
    .demo .tab span{display:inline-block;margin-left: 0px;margin-right: 10px;width: 11px;height: 11px;line-height: 1px;text-align: center;cursor: pointer;font-size: 1px;font-weight: bold;color: #666;background-color: #E6E6E6;border-radius: 20px 20px 20px 20px; zoom:1;}
    .demo .tab .cur{background-color: #F25555}

    js

    var Unslider=function(targetEle,hoverEle,time,index){
         this.interval="";
         this.time=time;
         this.targetEle=targetEle;
         this.hoverEle=hoverEle;
         this.index=index||0;
     }
     Unslider.prototype={
         init:function(){
          $(this.hoverEle).find("span").eq(this.index).addClass("cur");
          this.bindEvent();
         },
         start:function(){
         var _this=this;
         this.interval=setInterval(function(){
              _this.index++;
             if(_this.index>=$(_this.hoverEle).find("span").length){
                 _this.index=0;
             }
             _this.change(_this.index);
         },this.time)
        },
        change:function(index){
          $(this.hoverEle).find("span").eq(index).addClass("cur").siblings().removeClass("cur");
          var _ele=$(this.targetEle).find("a[data-index="+index+"]")
              _ele.css({"opacity": 0});
              $(this.targetEle).append(_ele);
              _ele.animate({ "opacity": 1 }, 500);
        },
        goto:function(index){
         this.index=index;
         this.change(index);
         },
         stop:function(){
             if(this.interval){
                 clearInterval(this.interval);
             }
         },
         bindEvent:function(){
             var _this=this;
             $(this.hoverEle).find("span").hover(function(){
                _this.stop();
                _this.goto($(this).index());
             },function(){
                _this.start();
             })
         }
      };

     调用方式:

    var obj=new Unslider($("#adv-cont1"),$("#adv-tab1"),2000,0);
        obj.init();
        obj.start(); 

    第二种效果(水平移动)

    html

    <div id="demo3" class="demo" style="">
        <div id="adv-cont3" class="cont">
            <a data-index="0"><img src="../images/1.jpg" /></a>
            <a data-index="1"><img src="../images/2.jpg" /></a>
            <a data-index="2"><img src="../images/3.jpg" /></a>
            <a data-index="3"><img src="../images/4.jpg" /></a>
        </div>
        <div id="adv-tab3" class="tab">
            <span></span><span></span><span></span><span></span>
        </div>
    </div>

    css

    .demo{position: relative;width: 766px;margin: 20px auto;}
    .demo .cont{position: relative;width: 766px;height: 290px;}
    .demo .cont a{position: absolute;left: 0px;top: 0px;width: 766px;height: 290px;}
    .demo .cont a img{width: 766px;height: 290px;}
    .demo .tab{position: absolute;right: 0px;bottom: 0px;text-align: right;padding-bottom: 20px;padding-right: 10px;}
    .demo .tab span{display:inline-block;margin-left: 0px;margin-right: 10px;width: 11px;height: 11px;line-height: 1px;text-align: center;cursor: pointer;font-size: 1px;font-weight: bold;color: #666;background-color: #E6E6E6;border-radius: 20px 20px 20px 20px; zoom:1;}
    .demo .tab .cur{background-color: #F25555}
    #demo3{overflow:hidden;}
    #adv-cont3 {position:relative;width:400%;overflow:hidden;}
    #adv-cont3 a{float:left;display:inline;position:static;}

    js

    var Unslider=function(){
         this.config={
             targetEle:"",    //目标元素
             hoverEle:"", //鼠标hover元素
             speed:"1000",//滚动的速度
             time:"3000"  //中间间隔多少豪秒
          };
          this.index=0
      }
      Unslider.prototype={
          constructor:Unslider,
         init:function(options){
           this.config=$.extend(this.config,options||{});
          $(this.config.hoverEle).find("span").eq(this.index).addClass("cur");
          this.bindEvent();
         },
         start:function(){
         var _this=this;
         this.interval=setInterval(function(){
              _this.index++;
             if(_this.index>=$(_this.config.hoverEle).find("span").length){
                 _this.index=0;
             }
             _this.change(_this.index);
         },this.config.time)
        },
        change:function(index){
          $(this.config.hoverEle).find("span").eq(index).addClass("cur").siblings().removeClass("cur");
          var _ele=$(this.config.targetEle)
              _ele.animate({ "margin-left":"-"+index*100+"%"}, 500);
        },
        goto:function(index){
         this.index=index;
         this.change(index);
         },
         stop:function(){
             if(this.interval){
                 clearInterval(this.interval);
             }    
         },
         bindEvent:function(){
             var _this=this;
             $(this.config.hoverEle).find("span").hover(function(){
                _this.stop();
                _this.goto($(this).index());
             },function(){
                _this.start();
             })
         }
      };

    调用方式

    var obj=new Unslider();
        obj.init({"targetEle":$("#adv-cont3"),"hoverEle":$("#adv-tab3")});
        obj.start(); 
  • 相关阅读:
    【笔记】机器学习
    【笔记】机器学习
    【NLP】暑假课作业3
    【NLP】暑假课作业1
    【笔记】机器学习
    【转】谈谈我对攻读计算机研究生的看法
    Android学习笔记-事件处理
    精读《C++ primer》学习笔记(第四至六章)
    那些年,当我还是个小白
    精读《C++ primer》学习笔记(第一至三章)
  • 原文地址:https://www.cnblogs.com/haohaoday/p/3518823.html
Copyright © 2020-2023  润新知