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

Posted 奋斗的小小牛

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自己写的文字轮播(简陋版)相关的知识，希望对你有一定的参考价值。

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

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

 

 

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

　　

以上是关于自己写的文字轮播(简陋版)的主要内容，如果未能解决你的问题，请参考以下文章

jQuery 文字向上轮播

带有缩略图和文字提示的轮播图

简陋轮播

自己写的轮播图代码，如有疑问请留言，图片宽度为1024乘600

jQuery插件版无缝轮播，重写了之前的代码，显得更高大上一点

带无缝滚动的轮播图（含JS运动框架）-简洁版