国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > web前端 > jquery > jQuery插件:jQuery.slide.4.0介绍

jQuery插件:jQuery.slide.4.0介绍

来源:程序员人生   发布时间:2014-05-13 12:24:58 阅读次数:2606次

  更新jQuery.slide.4.0插件,新增自动循环滚动功能

  效果如下图所示

image

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)
生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
为码而活
积分:4237
15粉丝
7关注
栏目热点
关闭
程序员人生