最近遇到别人的一个需求,就是是类似中奖观众名单轮播的一个效果,会出现多次,需要写通用的方法,学习到了简单记录下
<!-- 消息滚动轮播1 -->
<p class="title">最新报名客户</p>
<div class="newsBox">
<img src="images/fire.png" height="200" width="200"/>
<div id="news" class="news">
<ul style="margin-top:0!important">
<li>
<a href="">陈**</a><a href="">157****9518</a><a href="">2天前</a>
</li>
<li>
<a href="">王**</a><a href="">151****3775</a><a href="">3天前</a>
</li>
<li>
<a href="">张**</a><a href="">135****7296</a><a href="">30分钟前</a>
</li>
<li>
<a href="">林**</a><a href="">182****2433</a><a href="">1小时前</a>
</li>
<li>
<a href="">朱**</a><a href="">137****3554</a><a href="">2天前</a>
</li>
<li>
<a href="">于**</a><a href="">157****9518</a><a href="">3天前</a>
</li>
</ul>
</div>
</div>
<!-- 消息滚动轮播 2-->
<p class="title">中间观众</p>
<div class="newsBox">
<img src="images/fire.png" height="200" width="200"/>
<div id="scroll1" class="news">
<ul style="margin-top:0!important">
<li>
<a href="">陈**</a><a href="">157****9518</a><a href="">2天前</a>
</li>
<li>
<a href="">王**</a><a href="">151****3775</a><a href="">3天前</a>
</li>
<li>
<a href="">张**</a><a href="">135****7296</a><a href="">30分钟前</a>
</li>
<li>
<a href="">林**</a><a href="">182****2433</a><a href="">1小时前</a>
</li>
<li>
<a href="">朱**</a><a href="">137****3554</a><a href="">2天前</a>
</li>
<li>
<a href="">于**</a><a href="">157****9518</a><a href="">3天前</a>
</li>
</ul>
</div>
</div>
/* 消息滚动轮播 */
function autoScroll(obj) {
$(obj).find('ul').animate({
marginTop: '-.60rem'
}, 1000, function () {
$(this).css({marginTop: "0px"});
//要对应到操作元素dom下的ul
var _li = $(obj).find("ul li");
var _clone =_li.first().clone();
_li.last().after(_clone);
_li.first().remove();
})
}
$(function () {
// setInterval('autoScroll("#news")', 2000);
setInterval(function () {
$(".news").each(function () {
// console.log($(this))
autoScroll($(this));
})
}, 2000)
})
数据是静态的死数据。