小白自制按钮切换滚动的走马灯幻灯片脚本 

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



#menu1 {
    position:absolute;
    width:15px;
    height:15px;
    z-index:1;
    background-color: #F90;
    top: 180px;
    left:70px;
}


#menu2 {
    position:absolute;
    width:15px;
    height:15px;
    z-index:1;
    background-color: #F90;
    top: 180px;
    left:90px;
}


#menu3 {
    position:absolute;
    width:15px;
    height:15px;
    z-index:1;
    background-color: #F90;
    top: 180px;
    left:110px;
}

#menu4 {
    position:absolute;
    width:15px;
    height:15px;
    z-index:1;
    background-color: #F90;
    top: 180px;
    left:130px;
}


#menu5 {
    position:absolute;
    width:15px;
    height:15px;
    z-index:1;
    background-color: #F90;
    top: 180px;
    left:150px;
}


#menu6 {
    position:absolute;
    width:15px;
    height:15px;
    z-index:1;
    background-color: #F90;
    top: 180px;
    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="menu1" onclick="javascript:allowmenu(1)"></div>
    <div id="menu2" onclick="javascript:allowmenu(2)"></div>
    <div id="menu3" onclick="javascript:allowmenu(3)"></div>
    <div id="menu4" onclick="javascript:allowmenu(4)"></div>
    <div id="menu5" onclick="javascript:allowmenu(5)"></div>
    <div id="menu6" onclick="javascript:allowmenu(6)"></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;
var currentleft=0;
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;
          currentleft=mydiv.scrollLeft;
          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;
          currentleft=mydiv.scrollLeft;
          i=0;
     }
     info.innerHTML='picwid'+picwid+'scrollLeft:'+mydiv.scrollLeft;
}


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

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


function allowmenu(m)
{
    if(i==0)
    menu(m);
}

function menu(n)
{
    i=1;
    var mudi=(n-1)*200;
    if(mudi>currentleft)
    {
       mydiv.scrollLeft=mydiv.scrollLeft+5;
       currentleft=mydiv.scrollLeft;
       setTimeout(menu(n),speed);
    }
    else if(mudi<currentleft)
    {
       mydiv.scrollLeft=mydiv.scrollLeft-5;
       currentleft=mydiv.scrollLeft;
       setTimeout(menu(n),speed);       
        
    }
    else
    {
        i=0;
    }
    info4.innerHTML='mudi'+mudi+' mydiv.scrollLeft'+mydiv.scrollLeft;
    
}




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


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

</script>
    
    
    </td>
  </tr>
</table>
<div id="info"></div>
<div id="info2"></div>
<div id="info3"></div>
<div id="info4"></div>
</body>
</html>

 

 

加强版，带按钮切换图片的幻灯片，也集成了之前的手动 自动功能

 

在不同位置记录当前的滚动位置   currentLeft  然后和 不同  mudi比较，   增或减    直到  相等为止

posted @ 2015-09-02 18:14  小白827  阅读(272)  评论(0)  编辑  收藏  举报