<style> .scroll{ width: 290px; height: 300px; border: 1px solid #ccc; line-height: 26px; font-size: 12px; overflow: hidden; } .scroll img{ width:288px; } </style> <div class="scroll"> <ul style="margin-top: -21px;"> <li class="margin-b-5 padding-5"> <img src="https://www.cnblogs.com/images/cnblogs_com/aiwuxia/1249807/o_%e6%b2%99%e7%94%bb%e5%8f%97%e5%a5%96.jpg" alt=""> </li> <li class="margin-b-5 padding-5"> <img src="https://www.cnblogs.com/images/cnblogs_com/aiwuxia/1249807/o_%e5%b0%8f%e5%b7%9d%e6%b2%99%e7%94%bb.jpg" alt=""> </li> <li> <div>li中间可以是任何内容</div> <div>只是一个实例</div> </li> <li class="margin-b-5 padding-5"> <a href="#">jquery是一个JavaScript(JS)框架,它支持JS的常规操作以及一些扩展</a> </li> <li class="margin-b-5 padding-5"> <a href="#">对JSON格式也能很好的解析,ajax也做了封装,语法也比较简单</a></li> <li class="margin-b-5 padding-5"><a href="#">jquery它解决了很多js的细节问题,也提供了很多强大的功能供大家使用。</a></li> </ul> </div>
<script type="text/javascript"> (function($){$.fn.scroll=function(options){var defaults={speed:30,direction:'vertical'};var opts=$.extend({},defaults,options),intId=[];function marquee(obj,step,direction){if(direction=='horizantal'){obj.find("ul").animate({marginLeft:'-=1'},0,function(){var s=Math.abs(parseInt($(this).css("margin-left")));if(s>=step){$(this).find("li").slice(0,1).appendTo($(this));$(this).css("margin-left",0);}});}else if(direction=='vertical'){obj.find("ul").animate({marginTop:'-=1'},0,function(){var s=Math.abs(parseInt($(this).css("margin-top")));if(s>=step){$(this).find("li").slice(0,1).appendTo($(this));$(this).css("margin-top",0);}});}} this.each(function(i){var speed=0<100-opts["speed"]&&100-opts["speed"]<=100?100-opts["speed"]:30;var direction=opts["direction"]=='vertical'||opts["direction"]=='horizantal'?opts["direction"]:'vertical';var _this=$(this);intId[i]=setInterval(function(){var sh;if(direction=='horizantal'){sh=_this.find("ul").find("li:first").outerWidth(true);}else{sh=_this.find("ul").find("li:first").outerHeight(true);} marquee(_this,sh,direction);},speed);_this.hover(function(){clearInterval(intId[i]);},function(){intId[i]=setInterval(function(){var sh;if(direction=='horizantal'){sh=_this.find("ul").find("li:first").outerWidth(true);}else{sh=_this.find("ul").find("li:first").outerHeight(true);} marquee(_this,sh,direction);},speed);});});}})(jQuery); $(function () { $('.scroll').scroll({ speed: 80, // 调节数值为1-100,越大速度越快 // direction:'vertical'(可选)vertical向上滚动,horizantal向左滚动 }); }); </script>
jqury插件 https://blog-static.cnblogs.com/files/aiwuxia/scroll.js