需要引用jquery
调用非常简单:
一、 向上滚动
$(".scroll_two").jScroll({vertical:true});
<div class="box scroll_two"> <ul> <li><a href="#">声明</a>| <a href="#">农夫山泉关于公益捐赠的严正声明</a></li> <li><a href="#">新车</a>| <a href="#">外观媲美轿车 全新一代奥德赛9月初亮相</a></li> <li><a href="#">活动</a>| <a href="#">开启燕京啤酒清爽之旅,赢取万元单反相机</a></li> <li><a href="#">探密</a>| <a href="#">亲历探寻长寿村莫斯利安的神奇之旅</a></li> <li><a href="#">中房</a>| <a href="#">2009CIHAF第十一届中国住交会</a></li> <li><a href="#">惠普</a>| <a href="#">你的打印机能省50%打印成本吗?</a></li> </ul> </div>
二、向左翻屏
$(".scroll_three").jScroll({speed:2000,scroll:3});
<div class="box scroll_three"> <ul> <li><a href="https://tool.4xseo.com/article/94993.html"><img src="http://t.zoukankan.com/images/1.jpg" alt="" /></a></li> <li><a href="https://tool.4xseo.com/article/94993.html"><img src="http://t.zoukankan.com/images/2.jpg" alt="" /></a></li> <li><a href="https://tool.4xseo.com/article/94993.html"><img src="http://t.zoukankan.com/images/3.jpg" alt="" /></a></li> <li><a href="https://tool.4xseo.com/article/94993.html"><img src="http://t.zoukankan.com/images/4.jpg" alt="" /></a></li> <li><a href="https://tool.4xseo.com/article/94993.html"><img src="http://t.zoukankan.com/images/5.jpg" alt="" /></a></li> <li><a href="https://tool.4xseo.com/article/94993.html"><img src="http://t.zoukankan.com/images/6.jpg" alt="" /></a></li> </ul> </div>
源码如下:
;(function($){ $.fn.extend({ "jScroll":function(o){ o =$.extend({ auto: 3000, //延迟时间(毫秒) speed: 800, //单次滚动时长(毫秒) vertical: false, //是否向上滚动(默认向左) scroll: 1 //每次滚动的元素数量 },o); var running = false, sizeCss = o.vertical ? "height" : "width", ulSize = 0; varscrollTimer, scrollLen, itemSize, animCss, i; var div = $(this), ul = div.find("ul"), li = ul.children("li"); div.css({overflow: "hidden"}); ul.css({margin: "0", padding: "0", display: "inline-block"}); li.css({"list-style-type": "none", float: o.vertical ? "none" : "left"}); //获取LI元素总宽(高) for(i=0; i<=li.size()-1; i++){ itemSize = o.vertical ?li.eq(i).outerHeight() : li.eq(i).outerWidth(); ulSize+=itemSize; } var divSize = o.vertical ? div.height() : div.width(); //容器宽(高) ul.css(sizeCss, (ulSize*2)+"px"); if(ulSize > divSize) running = true; //UL的宽(高)大于容的器宽(高)时才滚动 div.hover(function(){ clearInterval(scrollTimer); },function(){ if(running){ scrollTimer = setInterval(function(){ scrollLen = 0; itemSize = 0; li = ul.children("li"); for(i=0; i<=o.scroll-1; i++){ itemSize = o.vertical ?li.eq(i).outerHeight() : li.eq(i).outerWidth(); scrollLen+=itemSize; } animCss = o.vertical ? {marginTop:-scrollLen +"px"} : {marginLeft:-scrollLen +"px"}; ul.animate(animCss, o.speed, function(){ ul.css(o.vertical ? "margin-top" : "margin-left", "0"); li.slice(0,o.scroll).appendTo(ul); //将前面的元素移至末尾 }) }, parseInt(o.auto+o.speed)); } }).trigger("mouseleave"); //DOM加载完毕后自动执行hover(fn1, fn2)的fn2 } }); })(jQuery);