因为marquee里面的元素会跟在第一个显示的后面，而且当宽度增加到屏幕宽度的时候，容易出现错位显示。
所以通过setInterval()方法进行循环添加，添加一条marquee ，循环完毕，删除这一条marquee 。
如果只改变marquee 里面的元素，而不新添加marquee的话，显示会在上一条显示的末尾位置开始显示，而不是右侧的初始位置显示下一条数据。
初始化调用jump(),是为了屏蔽setInterval的等待时间。
当index=len-1时，其实最后一条要显示的内容已经执行过了，最后的判断就是初始化index和执行jump()，让滚动内容连续起来。
和加载代码就先执行jump()是一样的。
要改变滚动方向、速度等需求请参考 http://www.cnblogs.com/tuyile006/archive/2007/03/28/691329.html 里面有讲解。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style>
.my p {
display: none
}
.fixed .on {
display: block;
background: #ccc;
color: green;
width: 200px;
height: 50px;
height: 50px;
}
.fixed {
position: fixed;
z-index: 99999;
bottom: 200px;
width: 100%;
height: 50px;
}
</style>
<body>
<div class="fixed"></div>
<div class="my">
<p>我会不停地走1</p>
<p>我会不停地走2</p>
<p>我会不停地走3</p>
<p>我会不停地走4</p>
</div>
<script>
$(window).load(function() {
jump();
setInterval(jump, 15000);
});
var index = -1;
function jump() {
var marquee = $('<marquee scrollamount=15 loop="1" width="100%" height="50px;"></marquee>');
var len = $('.my p').length;
if (index != len - 1) {
// alert(index);
$('marquee').remove();
$('.my p').eq(index + 1).clone().addClass("on").appendTo(
marquee);
marquee.appendTo('.fixed');
index++;
} else {
//alert(3333333);
$('marquee').remove();
//初始化计数器
index = -1;
//最后一次setInterval循环的下一次，相当于初始化
jump();
}
}
</script>
</body>
</html>
3176
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
