首页 > 代码库 > 文字列表滚动（文字轮播）
文字列表滚动（文字轮播）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
* { margin: 0;padding: 0;}
#div1 {
top:100px;
position: relative;
border: 1px solid black;
width: 300px;
height: 300px;
margin: 10px auto;
overflow: hidden;
background-color:lightblue;
}
#div1 ul {
position: absolute;left: 0;
}
#div1 ul li {
list-style: none;
float: left;
width: 200px;
height: 30px;
padding: 10px;
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById(‘div1‘);
var oUl = oDiv.getElementsByTagName(‘ul‘)[0];
var aLi = oUl.getElementsByTagName(‘li‘);
var timer = null;
var iSpeed = -5;
oUl.innerHTML += oUl.innerHTML;
oUl.style.height = aLi.length * aLi[0].offsetHeight + ‘px‘;
timer =setTimeout(fnMove, 100);
oDiv.onmouseover = function () {
clearInterval(timer);
}
oDiv.onmouseout = function () {
clearInterval(timer);
timer = setInterval(fnMove, 100);
}
function fnMove() {
if (oUl.offsetTop < -oUl.offsetHeight / 2) {
oUl.style.top = 0;
}
oUl.style.top = oUl.offsetTop + iSpeed + ‘px‘;
if ((oUl.offsetTop % 50) == 0) {
clearInterval(timer);
timer =setTimeout(fnMove, 2000);
} else {
clearInterval(timer);
timer = setTimeout(fnMove, 100);
}
}
}
</script>
</head>
<body>
<div id="div1">
<ul>
<li>明天你是否会想起曾经我写的日记</li>
<li>一个人的时候不是不像你</li>
<li>一个人的时候只是怕想你</li>
<li>一个人的时候如果下起了雨</li>
<li>我也会学你把伞丢到一边</li>
<li>七月份的尾巴你是狮子座</li>
</ul>
</div>
</body>
</html>
文字列表滚动（文字轮播）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。