部分功能没有实现 只是让图片动起来了

<style> *{ margin: 0; padding: 0; list-style: none; } img{ vertical-align: top; } #box{ width: 800px; height: 460px; border: 2px solid gainsboro ; margin: 100px auto ; overflow: hidden; position: relative; cursor: pointer; } ul{ width: 4000px; height: 100%; position: absolute; left: -800px; } ul li { float: left } span{ display: inline-block; width: 44px; height: 44px; border: 1px solid; border-radius: 100%; text-align: center; line-height: 44px; font-size: 30px; font-weight: bold; cursor: pointer; z-index: 1000; } #span1{ position: absolute; left: 580px; top: 320px; } #span2{ position: absolute; left: 1284px; top: 320px; } </style> <body> <div id="box"> <ul id="ul"> <li><img src="img/poster-1.jpg" alt="" /></li> <li><img src="img/poster-2.jpg" alt="" /></li> <li><img src="img/poster-3.jpg" alt="" /></li> <li><img src="img/poster-4.jpg" alt="" /></li> <li><img src="img/poster-5.jpg" alt="" /></li> </ul> </div> <span style="display: none;" id="span1" > < </span> <span style="display: none;" id="span2">></span> <script> window.onload=function(){ var ul=document.getElementById("ul"); var timer; index=0; var box=document.getElementById("box"); var span1=document.getElementById("span1"); var span2=document.getElementById("span2"); box.onmouseover=function(){ span1.style.display="block"; span2.style.display="block"; } box.onmouseout=function(){ span1.style.display="none"; span2.style.display="none"; } //启动定时器 timer=setInterval(run,1000); function run(){ ul.style.left=-(index*800)+"px"; index++; if(index>4){ index=0; } } } </script>