右侧滚动部分代码

<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