小白自制手动加定时自动滚动的走马灯幻灯片脚本

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--

#myshell{
    width:200px;
    height: 200px;
    position:relative;
}



#mydiv {
    height: 200px;
    width: 200px;
    overflow:hidden;
    
}


#mydiv1 {
    height: 200px;
    float:left;
    width: 1200px;
    
}

#mydiv2 {
    height: 200px;
    float:left;
    
}

img{
    margin:0px;
    padding:0px;
    display:block;
    float:left;
    
}
#apDiv1 {
    position:absolute;
    width:15px;
    height:15px;
    z-index:1;
    background-color: #FFFFFF;
    top: 80px;
    left: 10px;
}


#apDiv2 {
    position:absolute;
    width:15px;
    height:15px;
    z-index:1;
    background-color: #FFFFFF;
    top: 80px;
    left:170px;
}
-->
</style>

</head>

<body onload="beginauto()">

<table width="200" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="200">
    <div id="myshell">
    <div id="apDiv1" onclick="javascript:allowleftgundong()"></div>
    <div id="apDiv2" onclick="javascript:allowrightgundong()"></div>
    <div id="mydiv">
    <div id="mydiv1"> <a href="#"><img src="1.jpg" width="200" height="200" border="0"  /></a>
      <a href="#"><img src="2.jpg" width="200" height="200" border="0"  /></a>
      <a href="#"><img src="3.jpg" width="200" height="200" border="0" /></a>
      <a href="#"><img src="4.jpg" width="200" height="200" border="0"  /></a>
      <a href="#"><img src="5.jpg" width="200" height="200" border="0"  /></a>
      <a href="#"><img src="6.jpg" width="200" height="200" border="0"  /></a>
    </div>
    </div>
    </div>
    
    <script language="javascript">
var speed=1;
var picwid=200;
var pictotal=1200;
var i=0;
var mar;
function leftgundong(){
    i=1;
    if(picwid>0)
     {
         mydiv.scrollLeft=mydiv.scrollLeft+5;
         info2.innerHTML=mydiv.scrollLeft;
         picwid=picwid-5;
         setTimeout(leftgundong,speed);
        
     }
    else
     {
         // clearInterval(mar)
          picwid=200;
          i=0;
     }
     info.innerHTML='picwid'+picwid+'scrollLeft:'+mydiv.scrollLeft;
}


function rightgundong(){
    i=1;
    if(picwid>0)
     {
         mydiv.scrollLeft=mydiv.scrollLeft-5;
         info2.innerHTML=mydiv.scrollLeft;
         picwid=picwid-5;
         setTimeout(rightgundong,speed);
        
     }
    else
     {
         // clearInterval(mar)
          picwid=200;
          i=0;
     }
     info.innerHTML='picwid'+picwid+'scrollLeft:'+mydiv.scrollLeft;
}


function allowleftgundong()
{
    if(i==0)
    leftgundong();
}

function allowrightgundong()
{
    if(i==0)
    rightgundong();
}


function autogundong(){
    
   if(i==0)
   {
    i=1;
    if(mydiv1.offsetWidth-mydiv.scrollLeft>200)
    {
        info3.interHTML=mydiv1.offsetWidth;
        leftgundong();
    }
    else
    {
        mydiv.scrollLeft=0;
    }
    i=0;
  }
    
}


function beginauto()
{
    mar=setInterval(autogundong,5000);
}

</script>
    
    
    </td>
  </tr>
</table>
<div id="info"></div>
<div id="info2"></div>
<div id="info3"></div>
</body>
</html>
其中 i 用来控制手动和自动之间的冲突，自动半截又手动容易让图片位置错乱。所以i=0表示资源未被占用，为1则为占用，不允许另一个运动操作