javascript控制图片滚动

最新推荐文章于 2024-04-29 21:35:15 发布

卤蛋哥

最新推荐文章于 2024-04-29 21:35:15 发布

阅读量276

点赞数

分类专栏：走马灯 marquee web前端图片滚动文章标签： javascript float function xhtml html

本文链接：https://blog.csdn.net/allenchang1987/article/details/6824653

版权

web前端同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

marquee

1 篇文章 0 订阅

订阅专栏

图片滚动

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<style type="text/css">
			body{background: gray;}
			#content{width: 1000px;margin: 0 auto;}
			#marquee{ overflow:hidden;width:500px;}
			#demo{width:1500px; float: left;}
			#demo1{ float: left;}
			#demo2{ float: left;}
			</style>
	</head>
<body>
	<div id="content">
		<div id="marquee">
<div οnmοuseοver="isable=0" οnmοuseοut="isable=1" id="demo">
	<div id="demo1">
		<img src="images/01.jpg" width="100" height="100"/><img src="images/02.jpg" width="100" height="100"/><img src="images/03.jpg" width="100" height="100"/><img src="images/04.jpg" width="100" height="100"/><img src="images/05.jpg" width="100" height="100"/>
	</div>
	<div id="demo2">
		<img src="images/01.jpg" width="100" height="100"/><img src="images/02.jpg" width="100" height="100"/><img src="images/03.jpg" width="100" height="100"/><img src="images/04.jpg" width="100" height="100"/><img src="images/05.jpg" width="100" height="100"/>
	</div>
</div></div>
<script type="text/javascript"> 
 
		 var demo=document.getElementById("demo");
		  var demo1=document.getElementById("demo1");
		  var demo2=document.getElementById("demo2");
		  var marquee=document.getElementById("marquee");
		  var result=document.getElementById("result");
		  var isable=1;
		  function roll()
		  {
		  	if(isable)
		  	{
		  	if (marquee.scrollLeft>=demo1.offsetWidth) 
		  	{
		  		marquee.scrollLeft-=demo1.offsetWidth;
		  	}
		  	else{
		  	 marquee.scrollLeft++;
		  	}
		  	}
		  }
		 var mymar= setInterval(function(){
		  	roll();
		  },50);
		 
	</script>
	</div>
	<hr/>
	<div id="result">
		 
	</div>
</body>

卤蛋哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript控制图片滚动

body{background: gray;} #content{width: 1000px;margin: 0 auto;} #marquee{ overflow:hidden;width:500px;} #demo{width:1500px; float:
复制链接

扫一扫