发布一个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);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

kingapex1

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值