版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_24003469/article/details/82858152
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>