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

先看一下效果图

实现原理

1、初始状态

wrap嵌套三个ul

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

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

html

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>

<body>
<div class="wrap">
<div class="container" id="j-media-list">
<ul class="list1">
<li><img src="img/media1.jpg" /></li>
<li><img src="img/media2.jpg" /></li>
<li><img src="img/media3.jpg" /></li>
<li><img src="img/media4.jpg" /></li>
<li><img src="img/media5.jpg" /></li>
</ul>
<ul class="list2">
<li><img src="img/media6.jpg" /></li>
<li><img src="img/media7.jpg" /></li>
<li><img src="img/media8.jpg" /></li>
<li><img src="img/media9.jpg" /></li>
<li><img src="img/media10.jpg" /></li>
</ul>
<ul class="list3">
<li><img src="img/media11.jpg" /></li>
<li><img src="img/media12.jpg" /></li>
<li><img src="img/media13.jpg" /></li>
<li><img src="img/media14.jpg" /></li>
<li><img src="img/media15.jpg" /></li>
</ul>
</div>
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</body>
</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;
}

$(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);
})

秒客网

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

相关文章