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

最新推荐文章于 2025-05-15 14:51:10 发布

weixin_30639719

最新推荐文章于 2025-05-15 14:51:10 发布

阅读量50

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/H5C3XXN/p/6034485.html

本文介绍了一种简单的文字轮播效果实现方式，通过复制内容并使用JavaScript控制滚动，实现了平滑的文字滚动展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

转载于:https://www.cnblogs.com/H5C3XXN/p/6034485.html