YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Downloads » Carousel – jQuery 相册插件

Carousel – jQuery 相册插件

程序简介:

Carousel是一个常见的特效,比如淘宝等网站就用这个效果展示推荐产品。我之前也用YUI写过这个效果,而这个是最近用jQuery写的。这个Carousel除了可以显示普通的carousel信息展示以外,我又添加了一些其他的效果,可以利用carousel实现相册的图片展示,效果还不错的!我目前还没有支持Ajax动态加载数据的功能,不过基本够用了。兼容性也是不错的,如果你需要Carousel效果,我的这个程序是个不错的选择。

Carousel 相册

$.carousels({
	root: '#photos-slider',
	carousel: '#photos-list',
	pages: {
		prevBlock: '#photo-prev-block',
		nextBlock: '#photo-next-block',
		prev: '#photo-prev-lnk',
		next: '#photo-next-lnk',
		current: '#article-curpage',
		total: '#article-totalpage'
	},
	direction: 'H',
	related: '#photos-related',
	relatedlist: '#photos-related-list',
	itemsPrePage: 1
});

普通Carousel

$.carousels({
	root: '#carousel',
	carousel: '#samples_list',
	pages: {
		prev: '#carousel_btn_lastgroup',
		next: '#carousel_btn_nextgroup'
	},
	itemsPrePage: 5,
	direction: 'H'
});

下载地址:carousel.zip

程序特点:

  1. 支持横向和纵向滚动
  2. 支持自动滚动
  3. 支持相册模式
  4. 支持自定义一屏子元素个数
  5. 浏览器兼容性好

程序 JavaScript 源代码

/**
 * @author Yaohaixiao
 */
jQuery.Carousel = function(config){
	this.setting = {
		root: null,
		related: null,
		relatedlist: null,
		relateditems: null,
		carousel: null,
	    pages: {
			prevBlock: null,
			nextBlock: null,
			prev: null,
			next: null,
			current: null,
			total: null
		},
	    timer: null,
		curPage: 0,
		maxPages: 0,
		speed: 1000,
		item: 'li',
		items: null,
		itemsPrePage: 0,
		itemsPreStep: 0,
		direction: 'V',
		auto: false	,
		isButtonsOut: false
	};
	
	$.extend(this.setting, config);
	
	this.init();
	
	return this;
};

jQuery.Carousel.prototype = {
	init: function(){
		var Carousel = this,
			setting = this.setting,		
		    direction = setting.direction.toUpperCase(),
		    carousel = setting.carousel,
			carouselWidth = 0,
			pages = setting.pages,
			next = pages.next,
			prev = pages.prev,
			related = setting.related,
			relatedlist = setting.relatedlist,
			current = pages.current,
			total = pages.total,			
			maxPages = 0;
			
		this.deleteItems();
		setting.items = $(setting.carousel).find(setting.item);
		if (!setting.itemsPreStep) {
			maxPages = setting.maxPages = Math.ceil($(setting.items).length / setting.itemsPrePage);
		}
		else{
			if (setting.itemsPreStep > 0) {
				if ($(setting.items).length < setting.itemsPrePage) {
					maxPages = setting.maxPages = 1;
				}
				else{
					maxPages = setting.maxPages = 1 + Math.ceil(($(setting.items).length - setting.itemsPrePage)/setting.itemsPreStep);
				}
			}
		}
		
		if (maxPages < 2) {
			$(next).addClass('hide');
			$(prev).addClass('hide');
		}
		
		if(direction==='H'){
			$(carousel).css('width', ($(setting.items[0]).width() * setting.items.length) + 'px');
		}
		
		if(related && relatedlist){
		    setting.relateditems = $(relatedlist).find('li');
		}
		
		if (current) {
			$(current).html(setting.curPage + 1);
		}
		if (total) {
			$(total).html(maxPages);
		}
		
		this.bind();

		if(setting.auto){
			 setting.timer = setTimeout(function(){
		         Carousel.auto.call(Carousel);
		     },4000); 
		}
		
		return this;
	},
	bind: function(){
		var Carousel = this,
		    setting = this.setting,
			root = $(setting.root),
			related = setting.related,
			relateditems = setting.relateditems,
			pages = setting.pages,
			prevBlock = pages.prevBlock,
			nextBlock = pages.nextBlock,
 		    btnNext = $(root.find(pages.next)[0]),
			btnPrev = $(root.find(pages.prev)[0]),
			clearTimer = function(evt){
				if (setting.timer) {
					clearTimeout(setting.timer);
					setting.timer = null;
				}
			},
            setTimer = function(evt){
                setting.timer = setTimeout(function(){
                    Carousel.auto.call(Carousel);
                }, 4000);
            };

		if (setting.auto) {
			$(root).mouseover(clearTimer);
			$(root).mouseout(setTimer);
			
			if (setting.isButtonsOut) {
				btnNext.mouseover(clearTimer);
				btnNext.mouseout(setTimer);
				
				btnPrev.mouseover(clearTimer);
				btnPrev.mouseout(setTimer);
			}
		}
		
		if (prevBlock && nextBlock) {
			root.mouseover(function(){
				$(btnPrev).removeClass('hide');
				$(btnNext).removeClass('hide');
			});
			root.mouseout(function(){
				$(btnPrev).addClass('hide');
				$(btnNext).addClass('hide');
			});
			
			$(prevBlock).click(function(evt){
				Carousel.prev.call(Carousel);
				
				evt.preventDefault();
				evt.stopPropagation();
			});
			$(nextBlock).click(function(evt){
				Carousel.next.call(Carousel);
				
				evt.preventDefault();
				evt.stopPropagation();
			});
		}
		
		$(btnPrev).click(function(evt){
			Carousel.prev.call(Carousel);
			
			evt.preventDefault();
			evt.stopPropagation();
		});
		
		$(btnNext).click(function(evt){
			Carousel.next.call(Carousel);
			
			evt.preventDefault();
			evt.stopPropagation();
		});
		
		if(related){
			$(relateditems).hover(function(evt){
				$(this).addClass('hover');
			},function(evt){
				$(this).removeClass('hover');
			});
			
			$('#lnk-back-beginning').click(function(evt){
			    setting.curPage = 0;
			
			    Carousel.current.call(Carousel, setting.curPage);
				$(related).addClass('hide');
				
				evt.preventDefault();
				evt.stopPropagation();
			});
		}
		
		return this;	
	},
	next: function(){
		var setting = this.setting,
		    pages = setting.pages,
			related = setting.related,
			current = pages.current,
			total = pages.total,			
			maxPages = setting.maxPages;
		
		setting.curPage += 1;
		if (setting.curPage === maxPages) {
			if (!related) {
				setting.curPage = 0;
			}
		}
		
		if (related) {
			if (setting.curPage === maxPages) {
				$(related).removeClass('hide');
			}
			else {
				this.current(setting.curPage);
			}
		}
		else {
			this.current(setting.curPage);
		}
		
		return this;
	},
	prev: function(){
		var setting = this.setting,
		    pages = setting.pages,	
			current = pages.current,
			total = pages.total,			
			maxPages = setting.maxPages;
			
		setting.curPage -= 1;
		if (setting.curPage < 0) {
			setting.curPage = maxPages - 1;
		}
		this.current(setting.curPage);
		
		return this;
	},
	current: function(index){
		var carousel = this,
			setting = this.setting,
		    pages = setting.pages,
			current = pages.current,
			total = pages.total,
			maxPages = setting.maxPages;			

		if (current) {
			$(current).html(setting.curPage + 1);
		}
		if (total) {
			$(total).html(maxPages);
		}
		
		this.move(setting.curPage);
		
		return this;
	},
	move: function(index){
		var setting = this.setting, 
		    direction = setting.direction, 
			carousel = $(setting.carousel); 
		
		if (direction.toUpperCase() === 'H') {
			property = 'left';
			scrollValue = setting.itemsPreStep ? (setting.itemsPreStep * $(setting.items[0]).width()) * index : $(setting.root).width() * index;
			
			carousel.animate({
				'left': '-' + scrollValue + 'px'
			}, setting.speed);
		}
		else {
			if (direction.toUpperCase() === 'V') {
				scrollValue = setting.itemsPreStep ? (setting.itemsPreStep * $(setting.items[0]).height()) * index : $(setting.root).height() * index;
				carousel.animate({
					'top': '-' + scrollValue + 'px'
				}, setting.speed);
			}
		}
		
		return this;
	},
	deleteItems: function(){
		var listPhotos = $(this.setting.carousel).find('img');
		
		if (listPhotos.length === 0) {
			return false;
		}
		listPhotos.each(function(i, img){
			if ($(img).attr('src').indexOf('.jpg') === -1) {
				$(img).parent().remove();
			}
		});

		return this;
	},
	auto: function(){
		var Carousel = this,
			setting = this.setting;

		 if(setting.timer){
		   clearTimeout(setting.timer);
		   setting.timer = null;
		}
         
		 if(setting.maxPages<2){
		    return false;
		 }
		
		setting.curPage += 1;
		if(setting.curPage===setting.maxPages){
	        setting.curPage = 0;
	    }

		this.current(setting.curPage);

        setting.timer = setTimeout(function(){
		    Carousel.auto.call(Carousel);
		},4000);

		return this;
	}
};

jQuery.carousels = function(){
	var carousels = [], i = 0, len = arguments.length;
	
	for (; i < len; i += 1) {
		carousels[i] = new jQuery.Carousel(arguments[i]);
	}
	
	return carousels;
};

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:Carousel – jQuery 相册插件

« »

1 条评论

  • 发现了一个BUG,next,prev按钮的DOM选择器,如果同时传多参数就会有问题,请大家下载carousel.js替换原来的。

    // bind() 修改后的代码
    btnNext = $(root.find(pages.next)[0]),
    btnPrev = $(root.find(pages.prev)[0]),

发表评论

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

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)