发布一个jquery插件-图片纵向（向上）循环滚动

/**
 * ApexSlider - 图片纵向滚动插件
 * @requires jQuery v1.2 or above
 * @author kingapex
 * http://www.enation.cn
 * Copyright (c) 2010 enaiton
 * Version: 1.0
 */
/**
 * 使用说明:
 * $(".list").ApexSlider();
 * 给定一个容器，会循环滑动这个容器的子,
 * 不限定容器及其子的html元素类型,
 * 容器和子的高度差不要太大，否则效果不太好。
 * 
 * 选项：
 * speed:滑动速度,默认500
 * step:停顿时长,默认4000
 */
(function($) {                                          
	$.fn.ApexSlider = function(o) {
		var timer =undefined;
	    o = $.extend({
	        speed: 500,
	        step:4000
	    }, o || {});
	    
		 return this.each(function() {
			 var box = $(this);
			 var children=  $(this).children();
			 var height  =parseInt( box.css("height").replace("px"));
			 children.each(function(i){
				 $(this).css("top",i*height +"px");
			 }).hover(function(){
				 stop();
			 },
			 function(){
				 start();
			 }
			 );
			 
			 function start(){
				 timer = setInterval(function() {
	               go();
	            },o.step);
			 }
			 
			 function stop(){
				 if(timer){
					 clearInterval(timer);
				 }
			 }
			 start();
			 
			 function go(){
				 children.animate({top:"-="+height},o.speed,'swing',function(){
					 restore();
				 });
			 }
			 
			 function restore(){
				  var top=0;
				  var topEl=undefined;
				  
				  children.each(function(i){
					  var temp = parseInt($(this).css("top").replace("px") );
					  if(temp<top){
						  topEl =$(this);
						  top=temp;
					  }
				 });
				 if(topEl)
					 topEl.css('top',(children.size()-1)*height+'px');
				
			 }
			 
		 });
	};
})(jQuery);

评论

1 楼 qazxsw123222 2011-09-08