css样式：
<style> #tu { 800px; height: 500px; position: relative; overflow: hidden; margin: 30px auto; } #ta { 4000px; height: 500px; margin-left: 0px; } .lie { 800px; height: 500px; background-size: contain; } </style>
body：
<body>
<form id="form1" runat="server">
<div id="tu" onmouseover="pause()" onmouseout="contin()">
<table id="ta" cellpadding="0" cellspacing="0">
<tr height="500px">
<td class="lie">
<img src="1.jpg" width="800" height="100%" /></td>
<td class="lie">
<img src="2.jpg" width="800" height="100%" /></td>
<td class="lie">
<img src="3.jpg" width="800" height="100%" /></td>
<td class="lie">
<img src="4.jpg" width="800" height="100%" /></td>
<td class="lie">
<img src="5.jpg" width="800" height="100%" /></td>
</tr>
</table>
<div id="zuo" style=" 30px; height: 50px; background-color: black; float: left; top: 200px; position: absolute; opacity: 0.5;"></div>
<div id="you" style=" 30px; height: 50px; background-color: black; left: 770px; top: 200px; position: absolute; opacity: 0.5;"></div>
</div>
</form>
</body>
js代码：
<script> document.getElementById("ta").style.marginLeft = "0px"; function huan() { var tp = document.getElementById("ta"); var a = parseInt(tp.style.marginLeft); if (a <= -3200) { tp.style.marginLeft = "0px"; } else { tp.style.marginLeft = (a - 800) + "px"; } } var id = window.setInterval(huan, 2000); function pause() { window.clearInterval(id); } function contin() { id = window.setInterval(huan, 2000); } document.getElementById('zuo').onclick = function () { var tp = document.getElementById("ta"); var a = parseInt(tp.style.marginLeft); if (a >= 0) { tp.style.marginLeft = "-3200px"; } else { tp.style.marginLeft = (a + 800) + "px"; } } document.getElementById('you').onclick = function () { var tp = document.getElementById("ta"); var a = parseInt(tp.style.marginLeft); if (a <= -3200) { tp.style.marginLeft = "0px"; } else { tp.style.marginLeft = (a - 800) + "px"; } } </script>