第一种:淡入淡出
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();