整体思路；
设一个div，设置宽与高。嵌入一个表格，确定好位置后，插入图片，超出部分隐藏。
在js中定义一个变量接受left的值，并赋值为0px，即初始值
设置一个函数
function a（）{在值中减掉一张图片的宽度}
设置一个延时时间
<style> #tu{ width:400px; height:300px; position:relative; margin:50px auto; overflow:hidden; border:1px solid #000;} #sk{ position:relative; left:0px; top:0px; transition:0.5s;} </style> </head> <body> <div id="tu" onclick="Change()"> <table id="sk" cellpadding="0" cellspacing="0"> <tr height="300"> <td><img src="" height="300" /></td> <td><img src="图片" /></td> <td><img src="图片" /></td> <td><img src="图片" height="300" /></td> </tr> </table> </div> </body> </html> <script> document.getElementById("sk").style.top="0px"; function Change() { var sk = parseInt(document.getElementById("sk").style.top); if(sk>-1200) { document.getElementById("sk").style.top=(sk-400)+"px"; } else{ document.getElementById("sk").style.top="0px" } window.setTimeout("Change()",1700) } window.setTimeout("Change()",1700) </script>
带有标记的大图轮播：
<html> <head> <title>123</title> </head> <style> #st{ width: 1170px; height: 425px; overflow: hidden; margin: auto;border: 1px solid #FCC; top:10px; left:auto; position:relative } #sy{ position: relative; top: 0px; left: 0px; transition: 0.7s; } </style> <body> <div id="st" onMouseOver="shao()" onMouseOut="Li()" > <table id="sy" cellpadding="0" cellspacing="0"> <tr height="425"> <td><img src="image/2016-04-22_ht_ug_Ellie_5029.jpg" width="1170px"/></td> <td><img src="image/2016-12-20_oilsands_home.jpg" style=" 1170px; height:425px" /></td> <td><img src="image/2016-12-23_holiday_hp.jpg" style=" 1170px; height:425px" /></td> <div id="jt" onClick="zuo()"><</div> <div id="jt2" onClick="you()">></div> </tr> </table> </div> </body> </html> <script> document.getElementById("sy").style.left="0px" function abc() { var sy= parseInt(document.getElementById("sy").style.left); if(sy>-2340){ document.getElementById("sy").style.left=(sy-1170)+"px" } else{ document.getElementById("sy").style.left="0px" } shi=window.setTimeout("abc()",3000); } var shi=window.setTimeout("abc()",3000); function zuo(){ var sy = parseInt(document.getElementById("sy").style.left); if(sy<0) { document.getElementById("sy").style.left=(sy+1170)+"px" sy=sy+1170; } else { document.getElementById("sy").style.left="-2340px" } } function you() { var sy = parseInt(document.getElementById("sy").style.left); if(sy>-2340) { document.getElementById("sy").style.left=(sy-1170)+"px" sy=sy-1170; } else { document.getElementById("sy").style.left="0px" } } function shao() { window.clearTimeout(shi) } function Li() { shi=window.setTimeout("abc()",3000) } </script>
给图标设置点击事件，并且给轮播设置指向停止即可