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

最新推荐文章于 2022-11-10 20:00:00 发布

抱着太阳暖手

最新推荐文章于 2022-11-10 20:00:00 发布

阅读量210

点赞数

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

本文链接：https://blog.csdn.net/qq_24003469/article/details/82858152

版权

算法练习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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>

抱着太阳暖手

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript编写一个图片滚动小程序

javascript编写一个图片滚动小程序自己可以更改图片的位置，每个图片大小200x200，总共四个图片&lt;!DOCTYPE HTML&gt;&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;style&gt; *{margin: 0px;padding: 0px;} #div1 {width: 800px;height: 20...
复制链接

扫一扫