图片的水平滚动和上下滚动

  

这些天被图片的滚动效果搞的头都大了，唉·菜鸟就是菜鸟，不过现在还是有所收获的，至少知道了怎么做图片的水平滚动和上下滚动效果。

水平滚动效果实例：

<! 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=gb2312"   />
< title > 无标题文档 </ title >
< script > ...
function setDiv()
...{
    imgdiv1.innerHTML+=imgdiv1.innerHTML;
    setInterval(roll,30);
}
function roll()
...{
    window.status=imgdiv.scrollLeft;
    if(imgdiv.scrollLeft>=606)
    ...{
        imgdiv.scrollLeft=0;
    }
    else
    ...{
        imgdiv.scrollLeft++
    }
}



</ script >
</ head >

< body  onload ="setDiv()" >
< div  id ="imgdiv"  style ="overflow:hidden; width:600px" >
< table  align ="center"  width ="600" >
< tr  align ="center"  style ="width:100%" >
< td  align ="center"  style ="width:100%" >
< div  id ="imgdiv1"  style ="float:left; width:1300px" >
< img  src ="035s.jpg"  width ="100"  height ="80"   />< img  src ="20070615092653962.jpg"  width ="100"  height ="80"   />< img  src ="index_21.jpg"  width ="100"  height ="80"   />< img  src ="Sports_Baloon_002.jpg"  width ="100"  height ="80"   />< img  src ="u=1702651831,590350574&gp=3.jpg"  width ="100"  height ="80"   />< img  src ="图片 (129).jpg"  width ="100"  height ="80"   />

</ div >
< td >
</ tr >
</ table >





<! 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=gb2312"   />
< title >上下滚动示例 </ title >
< script > ...
function setDiv()
...{
    //document.getElementByID(imgdiv1).innerHTML=document.getElementByID(imgdiv).innerHTML;
    imgdiv1.innerHTML=imgdiv.innerHTML;
}

function roll()
...{
    window.status=imgdiv1.offsetTop;
    if(imgdiv1.offsetTop-bo.scrollTop<=0)
    ...{
        bo.scrollTop=0;
    }
    else
        bo.scrollTop++;
}

var k=setInterval(roll,60);

function imgStop()
...{
    var c = clearInterval(k);
}
function imgStart()
...{
    k=setInterval(roll,60);
}

</ script >
</ head >

< body  onload ="setDiv()" >
< div  id ="bo"  style =" overflow:hidden;height:50px" >

< div  id ="imgdiv"  onmouseover ="imgStop()"  onmouseout ="imgStart()" >
< a  href ="1.jpg" >< img  src ="1.jpg"   /></ a >
< a  href ="Untitled-3.html" >< img  src ="2.jpg"   /></ a >
< a  href ="3.jpg" >< img  src ="3.jpg"   /></ a >
</ div >

< div  id ="imgdiv1" >
</ div >

</ div >
</ body >
</ html >