直接上代码,可能不是最好的,欢迎吐槽。
$.fn.slider = function (opt) {
opt = $.extend({
speed:'fast',auto: false,interval: 1000
},opt);
var _this = this;
var index = 0;
_this.find('.window li').width(_this.width());
var animate = function(index){
var win = _this.find('.window');
var offset = win.parent().width();
win.animate({'marginLeft': -offset * index},opt.speed);
_this.find('.tab li').removeClass('select');
_this.find('.tab li').eq(index).addClass('select');
};
_this.find('.tab li').mouSEOver(function () {
index = parseInt($(this).index());
animate(index);
});
_this.find('.btn li:first-child').click(function(){
--index;
if(index < 0){
index = _this.find('.window li').length - 1;
}
animate(index);
});
_this.find('.btn li:last-child').click(function(){
++index;
if(index >= _this.find('.window li').length){
index = 0;
}
animate(index);
});
if(opt.auto){
var time = setInterval(function(){
++index;
if(index >= _this.find('.window li').length){
index = 0;
}
animate(index);
},opt.interval);
}
return $.each(this,function(index,ele){});
};
})(jQuery);
Html