js实现无缝滚动

最新推荐文章于 2024-07-06 00:08:38 发布

前端攻城狮_lucky

最新推荐文章于 2024-07-06 00:08:38 发布

阅读量1.6k

点赞数

分类专栏： js 文章标签： js html css

本文链接：https://blog.csdn.net/sinat_31597631/article/details/72844698

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html> 

<head> 
	<meta charset="utf-8"> 
	<title>图片滚动</title> 
</head> 
<body> 
	<style type="text/css"> 
		#demo { 
			background: #FFF; 
			overflow:hidden; 
			border: 1px dashed #CCC; 
			width: 200px; 
		} 
		#demo img { 
			border: 3px solid #F2F2F2; 
		} 
		#indemo { 
			float: left; 
			width: 800%; 
		} 
		#demo1 { 
			float: left; 
		} 
		#demo2 { 
			float: left; 
		} 

	</style> 
<div id="demo"> 
	<div id="indemo"> 
		<div id="demo1">
			<a href="#"><img src="/jscss/demoimg/wall_s1.jpg" border="0" /></a> 
			<a href="#"><img src="/jscss/demoimg/wall_s2.jpg" border="0" /></a> 
			<a href="#"><img src="/jscss/demoimg/wall_s3.jpg" border="0" /></a> 
			<a href="#"><img src="/jscss/demoimg/wall_s4.jpg" border="0" /></a> 
			<a href="#"><img src="/jscss/demoimg/wall_s5.jpg" border="0" /></a> 
			<a href="#"><img src="/jscss/demoimg/wall_s6.jpg" border="0" /></a> 
		</div> 
		<div id="demo2"></div> 
	</div> 
</div> 
<script> 
	<!-- 
	var speed=20; 
	var tab=document.getElementById("demo"); 
	var tab1=document.getElementById("demo1"); 
	var tab2=document.getElementById("demo2"); 
	tab2.innerHTML=tab1.innerHTML; 
	function Marquee(){ 
	if(tab2.offsetWidth-tab.scrollLeft<=0) 
	tab.scrollLeft-=tab1.offsetWidth 
	else{ 
	tab.scrollLeft++; 
	} 
	} 
	var MyMar=setInterval(Marquee,speed); 
	tab.οnmοuseοver=function() {clearInterval(MyMar)}; 
	tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}; 
	--> 
</script> 
</body> 
</html>