无缝滚动js代码通俗易懂(自写)
时间：2023-07-02 05:23:49
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{padding:0; margin:0;}
ul{ list-style:none;}
#div{ width:300px; height:100px; margin:100px auto; border:1px solid #ff0000; position:relative; overflow:hidden;}
#div ul{ position:absolute; height:100px; left:0;}
#div ul li{ width:300px; height:100px; line-height:100px; text-align:center; float:left}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById("div");
var oUl=oDiv.getElementsByTagName("ul")[0];
var oLi=oUl.getElementsByTagName("li");
var oInput=document.getElementsByTagName('input');
oUl.innerHTML +=oUl.innerHTML;
oUl.style.width=oLi[0].offsetWidth*oLi.length+"px";
var iSeep=-2;
var tamer=null;
clearInterval(tamer);
function starMove(){
tamer=setInterval(function(){
oUl.style.left=oUl.offsetLeft+iSeep+"px";
if(-oUl.offsetLeft >= oUl.offsetWidth/2){
oUl.style.left="0px";
}else if(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2+"px";
}
},30)
}
starMove();
oDiv.onmouseover=function(){
clearInterval(tamer);
}
oDiv.onmouseout=function(){
starMove();
}
oInput[0].onclick=function(){
iSeep=-2;
}
oInput[1].onclick=function(){
iSeep=2;
}
}
</script>
</head>
<body>
<input type="button" value="左">
<input type="button" value="右">
<div id='div'>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>
标签：无缝滚动,js
0
投稿猜你喜欢
通过事务日志解决SQL Server常见四大故障（一）
2009-03-25 13:46:00
js修改原型的属性使用介绍
2024-04-10 10:51:03
Django 报错:Broken pipe from ('127.0.0.1', 58924)的解决
2021-03-27 21:12:09
WEB2.0网页制作标准教程（3）定义语言编码
2007-11-13 13:23:00
python字符串下标与切片及使用方法
2022-04-21 13:08:03
大数据量时提高分页的效率
2024-01-25 09:07:37
Python编程中的异常处理教程
2022-10-16 04:26:23
MySQL语句执行顺序和编写顺序实例解析
2024-01-26 12:39:18
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2023-09-15 20:13:57
Python从使用线程到使用async/await的深入讲解
2021-07-26 10:56:11
MySQL InnoDB ReplicaSet(副本集)简单介绍
2024-01-20 11:10:45
详解Vue使用命令行搭建单页面应用
2024-04-10 10:24:03
使用CSS3和RGBa创建超酷的按钮
2009-06-02 12:41:00
python 中pass和match使用方法
2023-07-17 05:49:47
基于bootstrap实现收缩导航条
2024-04-28 09:53:16
em与px的区别以及em特点和应用
2008-11-11 12:03:00
python网络爬虫之模拟登录 自动获取cookie值 验证码识别的具体实现
2023-10-08 03:00:37
python+Django+pycharm+mysql 搭建首个web项目详解
2024-01-18 22:18:07
Go语言LeetCode题解682棒球比赛
2023-09-17 06:02:59
Python namedtuple命名元组实现过程解析
2022-08-20 14:27:20