两种轮播效果

第一种：淡入淡出

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();