<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; list-style: none; } #box{ width: 1000px; margin: 100px auto; position: relative; overflow:hidden; height: 250px; } #box ul{ width: 2000px; position: absolute; overflow: hidden; } #box ul li{ width: 250px; float: left; } #box ul li img{ width: 100%; } </style></head><body><div id="box"> <ul id="ul"> <li><img src="images/a1.jpg"></li> <li><img src="images/a2.jpg"></li> <li><img src="images/a3.jpg"></li> <li><img src="images/a4.jpg"></li> </ul></div><a href="javascript" onclick="imgAutoPlay(-5)">向左</a><a href="javascript" onclick="imgAutoPlay(5)">向右</a></body></html><script> var oli=document.getElementById("ul"); var speed=5 oli.innerHTML+=oli.innerHTML; setInterval(function () { if(oli.offsetLeft > 0){ oli.style.left = "-1000px"; }else if(oli.offsetLeft < "1000px" ){ oli.style.left= "0"; } oli.style.left=oli.offsetLeft+speed +"px"; },30)</script>
添加回答
举报
0/150
提交
取消