bootstrap图片切换/轮播插件–jCarouselLite.js

1、结构

(function($) {
    $.jCarouselLite = {
        version: '1.1'
    };
    $.fn.jCarouselLite = function(options) {
    	options = $.extend({}, $.fn.jCarouselLite.options, options || {});
        return this.each(function() {
	        var running,
	        animCss, sizeCss,
	        div = $(this), ul, initialLi, li,
	        liSize, ulSize, divSize,
	        numVisible, initialItemLength, itemLength, calculatedTo, autoTimeout;
	        initVariables();
	        initStyles();
	        initSizes();
	        attachEventHandlers();
	        function initVariables() {}
	        function initStyles() {}
	        function initSizes() {}
	        function attachEventHandlers() {}
	        function go(to) {}
	        function setupAutoScroll() {}
	        function visibleItems() {}
	        function adjustOobForCircular(to) {}
	        function adjustOobForNonCircular(to) {}
	        function disableOrEnableButtons() {}
	        function animateToPosition(animationOptions) {}
	    });
	};
	$.fn.jCarouselLite.options = {};
})(jQuery);

2、各函数解析
2.1、initVariables
初始化变量
a)设置状态为非滚动状态:running = false;
b)指定切换区块:ul = $(this).find(“>ul”);
c)指定切换区块的个数:initialItemLength = ul.find(“>li”);.size();
d)指定可见切换个数
e)根据是否循环决定是否在指定切换区块进行前插与后插及指定下一帧起始索引:ul.prepend($lastItemSet).append($firstItemSet);options.start += numVisible;
f)设置calculatedTo:calculatedTo = options.start;
2.2、initStyles
初始化时设置样式
a)指定区块可见:div.css(“visibility”, “visible”);
b)每个li流式布局:li.css({overflow: “hidden”,”float”: options.vertical ? “none” : “left”});
c)设置ul、div布局
d)如果非循环且已到起始位置指定左键不可用:$(options.btnPrev).addClass(“disabled”);
2.3、initSizes
初始时设置宽高大小
a)根据是否垂直切换设置li的大小:liSize = options.vertical ? li.outerHeight(true) : li.outerWidth(true);
b)根据li的大小设置ul、div的大小:ulSize = liSize * itemLength; divSize = liSize * numVisible;
c)设置ul的样式
d)设置div的样式
2.4、attachEventHandlers
初始化时绑定监听事件
a)绑定左右/上下按钮点击切换事件
b)绑定鼠标滚动事件
c)绑定循环滚动事件
主要调用go函数,传入参数为下一次计算移动距离的起始点

2.5、go
主要执行函数,在左右/上下点击时、鼠标滚动时、自动轮播时执行。
a)清除定时器(停止自动轮播):clearTimeout(autoTimeout)
b)根据传入参数设置calculatedTo:calculatedTo = to;
c)根据是否循环滚动执行adjustOobForCircular或者adjustOobForNonCircular来调整calculatedTo
d)执行自定义动画animateToPosition
e)根据是否循环滚动规定是否设置按钮不可用:disableOrEnableButtons();

2.6、animateToPosition
a)设置状态滚动中:running = true;
b)执行自定义动画
如果左右滚动,改变left属性:{ left: -(calculatedTo*liSize) }
如果垂直滚动,改变top属性:{ top: -(calculatedTo*liSize) }
然后如果有回调则执行回调函数:$.extend({duration: options.speed,easing: options.easing}, animationOptions)
本操作依赖于calculatedTo的计算
2.7、adjustOobForNonCircular
如果循环时执行点击或者轮播时对calculateTo做调整。
2.8、adjustOobForNonCircular
如果不循环时执行点击或者轮播时对calculateTo做调整。

3、使用场景
图片轮播或点击切换时。
4、使用方法
API绑定在全局变量$上。
$(“.**”).jCarouselLite({
btnNext: “.**”,
btnPrev: “.**”
})

此条目发表在数据库分类目录。将固定链接加入收藏夹。

发表评论

邮箱地址不会被公开。 必填项已用*标注