javascript 无缝滚动源码

最新推荐文章于 2024-07-21 10:17:51 发布

青天诀

最新推荐文章于 2024-07-21 10:17:51 发布

阅读量445

点赞数

分类专栏： Web前端文章标签： Web前端 javascript

本文链接：https://blog.csdn.net/u012193330/article/details/41204793

版权

Web前端专栏收录该内容

123 篇文章 1 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>无缝滚动</title>
		<style>
			*{
				margin:0px;
				padding:0px;
			}
			#move{
				width:920px;
				height: 170px;
				margin:100px auto;
				position:relative;
				background: red;
				overflow:hidden;
				
			}
			#move ul{
				width:1840px;
				height:170px;
				position: absolute;
			}
			#move ul li{
				float:left;
				list-style:none;
			}
			
			#btns{
				margin:0px auto;
				width:150px;
				height:50px;
			}
		</style>
		<script>
			window.οnlοad=function(){
				var oUl=document.getElementsByTagName('ul')[0];
				var oBtn1=document.getElementById('btn1');
				var oBtn2=document.getElementById('btn2');
				var timer=null;
				var speed=5;
				oUl.innerHTML+=oUl.innerHTML;
				function moveFun(){
					if(oUl.offsetLeft>0-5)
					{
						oUl.style.left=-oUl.offsetWidth/2+'px';
					}
					if(oUl.offsetLeft<-oUl.offsetWidth/2)
					{
						oUl.style.left=0+'px';
					}
					oUl.style.left=oUl.offsetLeft+speed+'px';
				}
				timer=setInterval(moveFun,30);
				oUl.οnmοuseοver=function(){
					clearInterval(timer);
				};
				oUl.οnmοuseοut=function(){
					timer=setInterval(moveFun,30);
				};
				oBtn1.οnclick=function()
				{
					speed=-5;
				};
				oBtn2.οnclick=function()
				{
					speed=5;
				};
			};
		</script>
	</head>
	<body>
		<div id="move">
			<ul>
				<li><img src="img/1.jpg" /></li>
				<li><img src="img/2.jpg" /></li>
				<li><img src="img/3.jpg" /></li>
				<li><img src="img/4.jpg" /></li>
			</ul>
		</div>
		<div id="btns">
			<input id="btn1" type="button" value="向左移动" />
			<input id="btn2" type="button" value="向右移动" />
		</div>
		
	</body>
</html>

青天诀

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript 无缝滚动源码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> 无缝滚动 *{ margin:0px; padding:0px; } #move{ width:920px; height
复制链接

扫一扫