您现在的位置:首页 >> 前端 >> 内容

无限循环滚动,从右到左,一次一条

时间:2017/3/28 9:11:00 点击:

  核心提示:无限循环滚动,从右到左,一次一条。因为marquee里面的元素会跟在第一个显示的后面,而且当宽度增加到屏幕宽度的时候,容易出现错位显示。所以通过setInterval()方法进行循环添加,添加一条ma...

无限循环滚动,从右到左,一次一条。因为marquee里面的元素会跟在第一个显示的后面,而且当宽度增加到屏幕宽度的时候,容易出现错位显示。

所以通过setInterval()方法进行循环添加,添加一条marquee,循环完毕,删除这一条marquee 。

如果只改变marquee 里面的元素,而不新添加marquee的话,显示会在上一条显示的末尾位置开始显示,而不是右侧的初始位置显示下一条数据。

初始化调用jump(),是为了屏蔽setInterval的等待时间。

当index=len-1时,其实最后一条要显示的内容已经执行过了,最后的判断就是初始化index和执行jump(),让滚动内容连续起来。

和加载代码就先执行jump()是一样的。

要改变滚动方向、速度等需求请参考 https://www.cnblogs.com/tuyile006/archive/2007/03/28/691329.html 里面有讲解。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script src="https://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>


<p class="fixed"></p>




<p class="my">
<p>我会不停地走1</p>
<p>我会不停地走2</p>
<p>我会不停地走3</p>
<p>我会不停地走4</p>
</p>




<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>

作者:网络 来源:xiaoqiang3