最近一直在写图片的轮播图,满脑子全是图片滚动, 今天来换一个文字轮播写写. 大家不要在意样式,和内容.都是我随便写的.
主要思路就是 复制两块一样的内容,在内容滚动的过程中,判断当第二个内容滚到一定位置时,重置整体滚动的值.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
*{
margin: 0;
padding: 0;
text-align: center;
}
.container{
border: 1px solid #0094ff;
height: 100px;
overflow: hidden;
}
.first{
}
</style>
</head>
<body>
<h2>文字轮播</h2>
<div class="container" id="demo">
<p>文字轮播已经开始</p>
<div class="first" id="demo1">
<ul>
<li>000</li>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
<li>777</li>
<li>888</li>
<li>999</li>
</ul>
</div>
<div class="second" id="demo2"></div>
</div>
</body>
</html>
<script>
//文字直播 思路 demo2 和demo1的内容一样 直到demo2的内容播完在跳回1
//滚动的速度
var speed = 30;
//获取dom元素
var demo = document.getElementById('demo');
var demo1 = document.getElementById('demo1');
var demo2 = document.getElementById('demo2');
//拷贝一份2
demo2.innerHTML = demo1.innerHTML;
//轮播的本质就是scrollTop ++
var carousel = function (){
//18指的是 总高度和first播完后的高度差 其实就是container下面的p标签的高度
if (demo2.offsetTop - demo.scrollTop == 18) {
demo.scrollTop -= demo1.offsetHeight;
}else{
demo.scrollTop++;
}
}
//设置定时器
var setTime = setInterval(carousel, speed);
//鼠标移入 清楚定时器
demo.onmouseenter = function () {
clearInterval(setTime);
}
demo.onmouseleave = function () {
setTime = setInterval(carousel, speed);
}
</script>