首页 > 代码库 > 自己写的文字轮播(简陋版)

自己写的文字轮播(简陋版)

2024-08-19 05:39:02   220人阅读

　　最近一直在写图片的轮播图,满脑子全是图片滚动, 今天来换一个文字轮播写写. 大家不要在意样式,和内容.都是我随便写的. 

　　主要思路就是 复制两块一样的内容,在内容滚动的过程中,判断当第二个内容滚到一定位置时,重置整体滚动的值.技术分享

 

 

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

　　

自己写的文字轮播(简陋版)


联系
我们