加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 业界 > 正文

jQuery插件:jQuery.slide.4.0介绍

发布时间:2018-08-16 23:58:43 所属栏目:业界 来源:站长网
导读:更新 jQuery .slide.4.0插件,新增自动循环滚动功能 效果如下图所示 Copy to Clipboard 引用的内容:[www.veryhuo.com]if(typeof rady === 'undefined') var rady = window.rady = {}; if(typeof liehuo.ui === 'undefined') liehuo.ui = {}; (function($)

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

  效果如下图所示

image

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com] 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)

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读