关于图片滚动的一个问题

<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.0 transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
#img_container{width:400px;height:120px;border:0px solid #000;float:left;}#marquees{width:400px;overflow:hidden;text-align:center;border:0px solid #000;line-height:23px;}
#marquees div div{float:left;margin:0;margin-right:8px;padding:0;}
</style>
</head><body>
<div id="pre" onmouseover="Right()" onmouseout="StopScroll()" style="float:left;width:20px;height:20px;border:1px solid #000;"><<</div>
<div id="img_container">
<div id="marquees">
<table border=0>
<tr align="center">
<td width=150><img src='http://www.webjx.com/img/200406301.jpg' border=0><br />第1期</td>
<td width=150><img src='http://www.webjx.com/img/200406301.jpg' border=0><br />第2期</td>
<td width=150><img src='http://www.webjx.com/img/200406301.jpg' border=0><br />第3期</td>
<td width=150><img src='http://www.webjx.com/img/200406301.jpg' border=0><br />第4期</td>
<td width=150><img src='http://www.webjx.com/img/200406301.jpg' border=0><br />第5期</td>
<td width=150><img src='http://www.webjx.com/img/200406301.jpg' border=0><br />第6期</td>
<td width=150><img src='http://www.webjx.com/img/200406301.jpg' border=0><br />第7期</td>
<td width=150><img src='http://www.webjx.com/img/200406301.jpg' border=0><br />第8期</td>
<td width=150><img src='http://www.webjx.com/img/200406301.jpg' border=0><br />第9期</td>
<td width=150><img src='http://www.webjx.com/img/200406301.jpg' border=0><br />第10期</td>
<td width=150><img src='http://www.webjx.com/img/200406301.jpg' border=0><br />第11期</td>
<td width=150><img src='http://www.webjx.com/img/200406301.jpg' border=0><br />第12期</td>
<td width=150><img src='http://www.webjx.com/img/200406301.jpg' border=0><br />第13期</td>
<td width=150><img src='http://www.webjx.com/img/200406301.jpg' border=0><br />第14期</td>
<td width=150><img src='http://www.webjx.com/img/200406301.jpg' border=0><br />第15期</td>
</tr>
</table>
</div>
</div>
<div id="nxt"onmouseover="Left()" onmouseout="StopScroll()" style="float:left;width:20px;height:20px;border:1px solid #000;">>></div>
<script language="JavaScript">
<!--
var sh;
var marquees=document.getElementById("marquees");
marqueesWidth=610;
stopscroll=false;;function scrollLeft()
{
if(stopscroll==true) return; marquees.scrollLeft+=5;

}function scrollRight()
{
if(stopscroll==true) return; marquees.scrollLeft-=5;

}function Left()
{
stopscroll = false;
sh = setInterval("scrollLeft()",20);
}function Right()
{
stopscroll = false;
sh = setInterval("scrollRight()",20);
}function StopScroll()
{
stopscroll = true;
clearInterval( sh );
}
//-->
</script>
</body>
</html>我的问题是，我想知道为什么当图片左右移动到最后的时候，会自动停下，而不是继续滚动呢？marquees.scrollLeft-=5;或者marquees.scrollLeft+=5;不是就让他的X坐标一直增加或者减少呢？我想要的就是到头自动停的效果，但是我以为还需要做位移像素的判断，没想到什么都不需要就自动停了，往高人指点一下！谢谢

解决方案 »

  1.   

    下面的代码不是在你的基础上改的，但是可以实现你要的效果<div id=demo style=overflow:hidden;height:160;width:200;>
    <div id=demo1 style=fload:left;width:863px;>
    <div style="margin:0;padding:0;float:left;">
    <img src="http://www.webjx.com/img/200406301.jpg" style=fload:left;width:100px;/>
    <br/>
    一
    </div> <div style="margin:0;padding:0;float:left;">
    <img src="http://www.webjx.com/img/200406301.jpg" style=fload:left;width:100px;/>
    <br/>
    二
    </div> <div style="margin:0;padding:0;float:left;">
    <img src="http://www.webjx.com/img/200406301.jpg" style=fload:left;width:100px;/>
    <br/>
    三
    </div> <div style="margin:0;padding:0;float:left;">
    <img src="http://www.webjx.com/img/200406301.jpg" style=fload:left;width:100px;/>
    <br/>
    四
    </div>
    </div>
    </div>
    <div onmouseover="doMoveToRight()" onmouseout="stopMoveToRight();">&lt;&lt;</div>
    <div onmouseover="doMoveToLeft()" onmouseout="stopMoveToLeft();">&gt;&gt;</div>
    <div id="divshow"></div>
    <script>
    var speed=10;
    demo1.innerHTML=demo1.innerHTML+demo1.innerHTML;
    //向左
    function Marquee()
    {
    if(demo1.offsetWidth/2-demo.scrollLeft<=33){//这里的33是随实际情况而定的，为了让调整位置时更柔和
    demo.scrollLeft-=demo1.offsetWidth/2;
    }else
    {
    demo.scrollLeft++;
    }
    }
    var MyMar;
    function doMoveToLeft()
    {
    MyMar=setInterval(Marquee,speed);
    }function stopMoveToLeft()
    {
    clearInterval(MyMar);
    }//向右
    function Marquee2()
    {
    if(demo.scrollLeft<=100){){//这里的100是随实际情况而定的，为了让调整位置时更柔和
    demo.scrollLeft+=(demo1.offsetWidth/2-32);){//这里的32是随实际情况而定的，为了让调整位置时更柔和
    }else
    {
    demo.scrollLeft--;divshow.innerHTML=""+demo.scrollLeft;
    }
    }function doMoveToRight()
    {
    MyMar=setInterval(Marquee2,speed);
    }function stopMoveToRight()
    {
    clearInterval(MyMar);
    }
    </script>
      

  2.   

    在
    demo.scrollLeft+=(demo1.offsetWidth/2-32);){//这里的32是随实际情况而定的，为了让调整位置时更柔和
    和
    if(demo.scrollLeft<=100){){//这里的100是随实际情况而定的，为了让调整位置时更柔和
    附近莫名其妙给我多加了一个 ){应该是
    if(demo.scrollLeft<=100){
    和
    demo.scrollLeft+=(demo1.offsetWidth/2-32);
      

  3.   

    哦，多谢楼上的，但是可能我没说清楚我的意思，那段代码实现的功能我明白，我只是不明白，为什么那个代码运行时，图片左右移动到头的时候会自动停止，而不是继续滚动呢？marquees.scrollLeft-=5;或者marquees.scrollLeft+=5;这两个就是让他的坐标一直增加或者减少，这段程序是通过什么来判断他到头了呢？我不明白的是这个，因为我没有写任何判断他是否移动到最后或者最前段的代码阿
      

  4.   

    此回复为自动发出,仅用于显示而已，并无任何其他特殊作用
    楼主【wish4sun】截止到2008-06-30 14:34:21的历史汇总数据(不包括此帖)：
    发帖数:1                  发帖分:20                 
    结贴数:0                  结贴分:0                  
    未结数:1                  未结分:20                 
    结贴率:0.00  %            结分率:0.00  %            
    如何结贴请参考这里：http://topic.csdn.net/u/20080501/09/ef7ba1b3-6466-49f6-9d92-36fe6d471dd1.html