html代码:
复制代码 代码如下:
javasscript 代码:
复制代码 代码如下:
function sliderfocus(options){
this.focus = options.focus;
this.slider = options.slider;
this.btns = options.btns;
this.width = options.width;
this.speed = options.speed || 800;
this.curindex = options.curindex || 0;
this.size = this.btns.size();
this.init();
this.timeout = null;
this.stoptemp = 1 ;
}
sliderfocus.prototype = {
init:function(){
this.auto();
this.bind();
},
play:function(){
this.slider.stop().animate({
left:-this.curindex * this.width
},this.speed);
},
auto:function(){
var that = this;
this.timeout = settimeout(function(){
if(that.stoptemp == 0){
return;
}else{
that.next();
that.auto();
}
},4000);
},
prev:function(){
this.curindex = --this.curindexthis.play();
},
next:function(){
this.curindex = ++this.curindex>this.size-1? 0 : this.curindex;
console.log(this.curindex)
this.play();
},
stop:function(){
this.stoptemp = 0;
},
bind:function(){
var that = this;
this.focus.bind(mouseover,function(){
that.stop();
}).bind(mouseout,function(){
that.stoptemp = 1;
//that.auto();
});
this.letsgo();
},
letsgo:function(){
var that = this;
this.btns.bind(click,function(){
var index = $(this).index();
that.curindex = index;
that.play();
});
}
};
new sliderfocus({
focus:$(.slider-focus),
slider:$(.slider-focus .slider),
btns:$(.btns li),
width:670
});