思路:无缝循环轮播,是一个轮播框(父节点)包含两个子节点,其中一个子节点是文字主体,另一个是这个子节点的复制品,即:在父类节点一定的高度下,这两个子节点实现由下而上的滚动。
贴代码前说下大家一般遇到的问题:不滚动或者滚动一段时间后不循环?
此问题的的症结在于父类节点的高度,解决思路为:
css先给轮播框一定的高度,js判断如果子节点主体文字的高度小于父类轮播框的高度,则轮播框父节点随子节点主体文字的高度而动态变化。
废话不多说,直接上代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>文字从下到上无缝轮播</title>
<style>
#rollCon{width: 80%;text-align: center;display: block;overflow: hidden;color: black;height: 35%;position: absolute;top: 55%;left: 10%;}
#rollSubject{height: auto;}
#rollCopy{height: auto;}
</style>
</head>
<body>
<div id="rollCon">
<div id="rollSubject">
<p>骑着单车的我俩</p>
<p>怀紧贴背的拥抱</p>
<p>难离难舍想抱紧些</p>
<p>茫茫人生好象荒野 </p>
<p>如孩儿能伏于爸爸的肩膊 </p>
<p>谁要下车 </p>
</div>
<div id="rollCopy"></div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var scrollTop = window.pageYOffset|| document.documentElement.scrollTop || document.body.scrollTop;
var rollCon = document.getElementById('rollCon');
var rollSubject = document.getElementById('rollSubject');
var rollCopy = document.getElementById('rollCopy');
rollCopy.innerHTML = rollSubject.innerHTML;
if(($('#rollSubject').height()>0)&&($('#rollSubject').height()<$('#rollCon').height())){
$('#rollCon').css('height',$('#rollSubject').height());
setInterval(Marquee, 50);
}else if(($('#rollSubject').height()>0)&&($('#rollSubject').height()>=$('#rollCon').height())){
setInterval(Marquee, 50);
}
function Marquee() {
if ((rollCopy.offsetTop-rollSubject.offsetTop)<rollCon.scrollTop)
rollCon.scrollTop =0;
else {
rollCon.scrollTop++;
}
}
</script>
</body>
</html>
或者点此下载