手记

尝试封装幻灯片滚动效果

;
(function($) {
var SlideFocus = function(ele, options) {
this.$element = ele,
this.options = $.extend(true, $.fn.slideFocus.defaults, options);
this.slideFocus();
}
SlideFocus.prototype = {
slideFocus: function() {
var me = this,
timer;
me.timer = timer;
me.index = me.options.index;
me.options.appoint ? me.oUl = me.$element.find(me.options.appoint) : me.oUl = me.$element.find("ul");
me.oLi = me.oUl.find("li");
if(me.options.adapt) {
me._getWH();
} else {
me.width = me.oLi.width();
me.oUl.width(me.width me.oLi.size());
}
me._setInterval();
if(me.options.button) {
me._button();
}
if(me.options.preNext) {
me._next();
}
me._initEvent();
},
_next: function() {
var preNext = "<div class='preNext pre'></div><div class='preNext next'></div>"
this.$element.append(preNext);
},
_getWH: function() {
var me = this;
me.width = me.$element.width();
me.oLi.width(me.width);
me.imgHeight = me.oLi.find("img").height();
me.$element.height(me.imgHeight);
me.oUl.width(me.width
me.oLi.size());
},
_setInterval: function() {
var me = this;
me.timer = setInterval(function() {
if(me.options.moveRight) {
me.index--;
} else {
me.index++
}
me.move();
}, me.options.time)
},
_button: function() {
var me = this;
var btn = "<div class='btn'>";
for(var i = 0; i < me.oLi.size(); i++) {
me.options.num ? btn += "<a>" + (i + 1) + "</a>" : btn += "<a></a>";
}
btn += "</div>"
me.$element.append(btn);
me.$element.find('.btn a').eq(me.index).addClass('on');
},
_initEvent: function() {
var me = this,
btnA = me.$element.find(".btn a"),
preNext = me.$element.find(".preNext");
me.$element.hover(function() {
clearInterval(me.timer);
if(me.options.preNext) {
preNext.stop().fadeIn();
}
}, function() {
if(me.options.preNext) {
preNext.stop().fadeOut();
}
me._setInterval();
})
if(me.button) {
btnA.on("mouseover", function() {
me.index = $(this).index();
me.move();
})
}
if(me.preNext) {
me.$element.find(".next").on("click", function() {
me.index++;
me.move();
})
me.$element.find(".pre").on("click", function() {
me.index--;
me.move();
})
}
if(me.options.adapt) {
var resizeId;
$(window).resize(function() {
clearInterval(me.timer);
clearTimeout(resizeId);
resizeId = setTimeout(function() {
me._getWH();
}, 300);
me._setInterval();
})
}
},
move: function() {
var me = this;
if(me.index < 0) {
me.index = me.oLi.size() - 1;
} else if(me.index >= me.oLi.size()) {
me.index = 0;
}
me.$element.find('.btn a').eq(me.index).addClass('on').siblings().removeClass("on");
me.oUl.stop().animate({
left: -me.width * me.index
}, me.options.moveTime)
}
}
$.fn.slideFocus = function(options) {
return this.each(function() {
var me = $(this),
instance = me.data("SlideFocus");
if(!instance) {
me.data("SlideFocus", (instance = new SlideFocus(me, options)));
}
if($.type(options) === "string") {
return instance[options]();
}
})
};
$.fn.slideFocus.defaults = {
preNext: false,
time: "3000",
moveTime: "300",
button: false,
index: 0,
num: true,
moveRight: false,
appoint: false,
adapt: true
}
})(jQuery)

2人推荐
随时随地看视频
慕课网APP

热门评论

求原码分享,求原码分享,求原码分享,真心话请求至少3遍

查看全部评论