javascript编写一个图片滚动小程序

最新推荐文章于 2024-03-29 08:48:44 发布

抱着太阳暖手

最新推荐文章于 2024-03-29 08:48:44 发布

阅读量254

点赞数

CC 4.0 BY-SA版权

分类专栏：算法练习文章标签： JS

本文链接：https://blog.youkuaiyun.com/qq_24003469/article/details/82858152

算法练习专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用JavaScript编写的图片滚动小程序，通过修改图片位置实现动态展示效果。代码中包含HTML和CSS样式设置，以及JavaScript逻辑控制，实现了图片的自动滚动和用户交互控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript编写一个图片滚动小程序

自己可以更改图片的位置，每个图片大小200x200，总共四个图片

<!DOCTYPE HTML>
<head>
	<meta charset="utf-8" />
	<style>
		*{margin: 0px;padding: 0px;}
		#div1 {width: 800px;height: 200px;background-color: red; position: absolute;top: 100px;left: 400px;overflow: hidden;}
		#div1 ul{position: absolute;left: 0px;top: 0px;}
		#div1 ul li {float: left;list-style-type: none;}
	</style>
	<script>
		window.onload=function()
		{
			var speed=0;
			var div1_1 = document.getElementById("div1");
			var oul=div1_1.getElementsByTagName("ul")[0];
			var li_l=oul.getElementsByTagName("li");
			var timer=null
			oul.innerHTML=oul.innerHTML+oul.innerHTML;
			oul.style.width=li_l[0].offsetWidth*li_l.length +'px';
			//alert(li_l[1].offsetWidth)
			function move(){
				// alert(oul.offsetLeft)
				if(oul.offsetLeft<-oul.offsetWidth/2)
					{
						oul.style.left='0';
						}
				if(oul.offsetLeft>0)
				{
					oul.style.left= -oul.offsetWidth/2+'px';
				}
				oul.style.left=oul.offsetLeft+speed+'px';
				//alert(oul.style.left)
			};
			timer=setInterval(move,30);
			div1_1.onmouseover=function(){clearInterval(timer);}
			div1_1.onmouseout=function(){timer=setInterval(move,30);}
			document.getElementsByTagName('a')[0].onclick=function(){
				speed=-2;
			}
			document.getElementsByTagName('a')[1].onclick=function(){
				speed=0;
			}
			document.getElementsByTagName('a')[2].onclick=function(){
				speed=2;
			}
		}

	</script>
</head>
<body>
	<a href="javascript:;">left</a>
	<a href="javascript:;">stop</a>
	<a href="javascript:;">right</a>
	<div id="div1">
		<ul>
			<li><img src="C:\Users\Administrator\Desktop\picture\1.jpg" /></li>
			<li><img src="C:\Users\Administrator\Desktop\picture\2.jpg" /></li>
			<li><img src="C:\Users\Administrator\Desktop\picture\3.jpg" /></li>
			<li><img src="C:\Users\Administrator\Desktop\picture\4.jpg" /></li>
		</ul>
	</div>
</body>