小白自制带按钮的图片滚动幻灯片

<!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>

<table width="200" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="200">
    <div id="myshell">
    <div id="apDiv1" onclick="javascript:leftgundong()"></div>
    <div id="apDiv2" onclick="javascript:rightgundong()"></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>
    
    
    </td>
  </tr>
</table>
<div id="info"></div>
<div id="info2"></div>
<script language="javascript">
var speed=1;
var picwid=200;
var pictotal=1200;
var i=0;
tag=document.getElementById("mydiv");
//var mar
function leftgundong(){
    if(picwid>0)
     {
         tag.scrollLeft=tag.scrollLeft+5;
         info2.innerHTML=tag.scrollLeft;
         picwid=picwid-5;
         setTimeout(leftgundong,speed);
        
     }
    else
     {
         // clearInterval(mar)
          picwid=200;
     }
     info.innerHTML='picwid'+picwid+'scrollLeft:'+tag.scrollLeft;
}


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


</script>
</body>
</html>

小白自制的翻页滚动幻灯片代码

父层overflow:hidden后通过scrollLeft控制横向滚动，但注意子层#mydiv1 一定要设宽度 ,试过不设不生效。

按钮要坐在 mydiv的平行级，而不是子级，原因是做到子层的话会随滚动跑。

相当于一个外壳层套按钮和滚动条。滚动条里套要滚动的长内容层。

setTimeout  是一次只执行一次，靠嵌套实现循环。  setInterval是不断循环



滚动速度受speed和

         tag.scrollLeft=tag.scrollLeft+5;
         info2.innerHTML=tag.scrollLeft;
         picwid=picwid-5;

里面两个位置的5来控制。  picwid就是用来记录一次最多滚多远，停在不同图片上。