jQuery插件:jQuery.slide.4.0介绍
来源:程序员人生 发布时间:2014-05-13 12:24:58 阅读次数:2802次
更新jQuery.slide.4.0插件,新增自动循环滚动功能
效果如下图所示
if(typeof rady === 'undefined')
var rady = window.rady = {};
if(typeof liehuo.ui === 'undefined')
liehuo.ui = {};
(function($) {
liehuo.ui.slide = function(options) {
this.opts = $.extend({}, liehuo.ui.slide.defaults, options);
this._container = this.opts.itemContain;
this._showContain = this.opts.showContain;
this._containsize = this.opts.containSize;
this._left = this.opts.leftMove;
this._right = this.opts.rightMove;
this._auto = this.opts.auto;
this._timer = null;
this._itemCount = 0;
this._index = 0;
this.__play = null;
this._init();
};
liehuo.ui.slide.prototype = {
_init: function() {
var $this = this;
$this._itemCount = $($this._container).length;
$this._showContain = $($this.opts.showContain);
$this._bindEvent();
$this._showItems();
$this._startAuto();
},
_startAuto: function(s) {
if (s != undefined)
this.opts.auto = s;
if (this.opts.auto == 0)
return this._stopAuto();
if (this._timer != null)
return;
var $this = this;
this._timer = setInterval(function() { $this._moveRight(); }, this._auto * 1000);
},
_stopAuto: function() {
if (this._timer == null)
return;
clearTimeout(this._timer);
this._timer = null;
},
_bindEvent: function() {
var $this = this;
$($this._left).bind("click", function() {
$this._stopAuto();
$this._moveLeft();
}).mouseout(function() {
$this._startAuto();
});
$($this._right).bind("click", function() {
$this._stopAuto();
$this._moveRight();
}).mouseout(function() {
$this._startAuto();
});
$this._showContain.hover(function() {
$this._stopAuto();
},
function() {
$this._startAuto();
}
)
},
_moveLeft: function() {
var $this = this;
if ($this._index >= 0)
{ $this._index -= 1; }
else
{ $this._index = 11; }
$this._showItems();
},
_moveRight: function() {
var $this = this;
if ($this._index <= $this._itemCount)
{ $this._index += 1; }
else
{ $this._index = 0; }
$this._showItems();
},
_showItems: function() {
var $this = this;
$this._showContain.empty();
for (i = $this._index; i < $this._index + $this._containsize; i++) {
$this._showContain.append($($this._container).eq(i > 9 ? i % 9 : i).clone());
}
}
};
//设计选项默认值
liehuo.ui.slide.defaults = {
showContain: "#thumblist",
itemContain: ".thumblist a",
containSize: 4, //盒子大小
leftMove: "#leftarrow",
rightMove: "#rightarrow",
auto:2
};
})(jQuery)