求用一段js，实现图片一张一张的向左或向右的循环移动

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<html>
<head>
<title>move</title>
<style type="text/css">
body {
    margin:0;
    padding:0;
}
ul,ol {
    margin:0;
    padding:0;
}
td div{
    width:150px;
    height:170px;
    border:solid 1px #060;
}
</style>
</head>
<body>
<input type="button" onclick="left(this)" value="left"/><input type="button" onclick="right(this)" value="right"/>
<div style="border:solid 1px #06c;height:200px;width:90%;overflow:hidden" id="inner">
<table>
<tr>
<td><div>a</div></td>
<td><div>b</div></td>
<td><div>c</div></td>
<td><div>d</div></td>
<td><div>e</div></td>
<td><div>f</div></td>
<td><div>g</div></td>
<td><div>h</div></td>
<td><div>i</div></td>
<td><div>j</div></td>
<td><div>k</div></td>
<td><div>l</div></td>
<td><div>m</div></td>
<td><div>n</div></td>
<td><div>o</div></td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">    var d=document.getElementById("inner");
var left=function(obj) {
    //alert(d.scrollLeft);
    d.scrollLeft-=156;
}
var e=0
var right=function(obj) {
//    d.scrollLeft+=156;
    e=d.scrollLeft+156
    run()
}var run = function(){
    if(d.scrollLeft>=e){d.scrollLeft=e;return;}
    d.scrollLeft+=1;
    setTimeout(run,10);
}</script>
</html>
JQuery有插件，也可以去你看见的任何一个地方抄。
<body style="text-align:center;">
    <form id="form1" runat="server">
    <div>
        <marquee  style="cursor:all-scroll;" behavior="scroll" direction="left" width="600" height="143" scrollamount="10" scrolldelay="0" loop="5" onclick="this.start();" onmouseover="this.stop();" onmouseout="this.start();">
            <img src="../images/2.jpg" width="811" height="143" >
            <img src="../images/3.jpg" width="811" height="143" >
            <img src="../images/4.jpg" width="811" height="143" >
            <img src="../images/5.jpg" width="811" height="143" >
            <img src="../images/6.jpg" width="811" height="143" >
            <img src="../images/7.jpg" width="811" height="143" >
        </marquee>
    </div>
    </form>
</body>
<html>
<script language="javascript">
function marqueeImage()
{
  if(imageDiv.scrollLeft<=0)
  {
    imageDiv.scrollLeft+=imageTd.offsetWidth;
  }
  else
  {
    imageDiv.scrollLeft--;
  }
}
function iniMarqueeImage()
{
  imageDiv.scrollLeft=imageTd.offsetWidth;
  imageTdTemp.innerHTML=imageTd.innerHTML;
  imageDiv.onmouseover=function(){clearInterval(myTime)}
  imageDiv.onmouseout=function(){myTime=setInterval(marqueeImage,speed)}
}
var speed=30;
var myTime=setInterval(marqueeImage,speed);
window.onload=iniMarqueeImage;
</script>
<body>
<div id="imageDiv" style="overflow:hidden;height:120px;width:312px;border:1px solid blue;">
  <table border="0" cellpadding="0" cellspacing="0" align="center">
    <tr>
      <td id="imageTd"><img src="http://www.baidu.com/img/baidu_logo.gif" width="150" height="120" style="margin-right:5px;"><img src="http://www.baidu.com/img/baidu_logo.gif" width="150" height="120" style="margin-right:5px;"></td>
      <td id="imageTdTemp"></td>
    </tr>
  </table>
</div>
</body>
</html>
<html>
<script language="javascript">
function marqueeImage()
{
  if(imageDiv.scrollLeft<=0)
  {
    imageDiv.scrollLeft+=imageTd.offsetWidth;
  }
  else
  {
    imageDiv.scrollLeft--;
  }
}
function iniMarqueeImage()
{
  imageDiv.scrollLeft=imageTd.offsetWidth;
  imageTdTemp.innerHTML=imageTd.innerHTML;
  imageDiv.onmouseover=function(){clearInterval(myTime)}
  imageDiv.onmouseout=function(){myTime=setInterval(marqueeImage,speed)}
}
var speed=30;
var myTime=setInterval(marqueeImage,speed);
window.onload=iniMarqueeImage;
</script>
<body>
<div id="imageDiv" style="overflow:hidden;height:120px;width:312px;border:1px solid blue;">
  <table border="0" cellpadding="0" cellspacing="0" align="center">
    <tr>
      <td id="imageTd"><img src="http://www.baidu.com/img/baidu_logo.gif" width="150" height="120" style="margin-right:5px;"><img src="http://www.baidu.com/img/baidu_logo.gif" width="150" height="120" style="margin-right:5px;"></td>
      <td id="imageTdTemp"></td>
    </tr>
  </table>
</div>
</body>
</html>