/** * 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);
发布一个jquery插件-图片纵向(向上)循环滚动
最新推荐文章于 2020-10-20 19:45:13 发布