jquery实现广告位循环向上滚动

先看一下效果图

实现原理

1、初始状态

wrap嵌套三个ul

2、让container滚动起来，滚动距离可自行设置设置

3、将顶部移动到底部，设置定时器，循环滚动

html

css

ul li {
	list-style: none;
}
.wrap {
	width: 1020px;
	height: 190px;
	overflow: hidden;
}
.wrap ul {
	height: 85px;
}
.wrap ul li {
	float: left;
	margin-right: 10px;
}

js

$(function() {

	var scrollListUp = function(list_id, height) { //list_id为需要滚动的div
		var _scrollList = $('#' + list_id);
		var _scrollHeight = height;
		var scrollList = function() {
			_scrollList.animate({
				'margin-top': '-' + _scrollHeight
			}, function() {
				_scrollList.css({
					'margin-top': '1px' //将滚动的div重新定位，若不定位，将失去滚动效果
				});
				_scrollList.find('ul:lt(1)').appendTo(_scrollList); //将位于顶部的广告位移动到底部
			})
		}
		var timer = setInterval(scrollList, 2000); //设置定时器
		_scrollList.mouseenter(function() {
			clearInterval(timer);
		})
		_scrollList.mouseleave(function() {
			timer = setInterval(scrollList, 2000);
		})
	}
	scrollListUp('j-media-list', 85);
})