网上有很多无缝滚动的插件,在这推荐一下我经常使用的jquery无缝向上滚动的插件:

仿拼多多拼单 向上无缝滚动-QUI-Notes

css直接省略了,自己写吧!

html部分:class名字改的话把js第一行的也修改了!

<div class="myscroll">
<ul> 
    <li>商品列表</li>
    <li>商品列表</li>
    <li>商品列表</li>
</ul>
</div>

js部分:

var $this = $(".myscroll");
var scrollTimer;
$this.hover(function() {
	clearInterval(scrollTimer);
	},
	function() {
		scrollTimer = setInterval(function() {
			scrollNews($this);
		}, 2000);
	}).trigger("mouseout");
function scrollNews(obj) {
		var $self = obj.find("ul:first");
		var lineHeight = $self.find("li:first").height();
		$self.animate({
			"margin-top": -lineHeight + "px",
			"opacity": "0.5"
		}, 600, function() {
			$self.css({
				"margin-top": "0px",
				"opacity": "1"
			}).find("li:first").appendTo($self);
		})
}

然后就可以了实现滚动了,不过父级盒子要设高度,溢出隐藏,内容高度大于父级盒子高度,才会滚动哦!