图片上下左右滚动实例

向上滚动图片

< body >
< div  id =demo  style ="background: #ffffff; overflow: hidden; width:400px; color: #0000ff; height: 500px" >  
     < div  id =demo1 >  
         < img  id ="img0"  height =500px  alt =""  src ="http://photo8.yupoo.com/20070730/110535_1428097478_yuniakfi.jpg"  width =375px  border =0  />
         < img  id ="img1"  height =500px  alt =""  src ="http://photo8.yupoo.com/20070730/110558_1774342009_clqycalf.jpg"  width =375px  border =0  />
         < img  id ="img2"  height =500px  alt =""  src ="http://photo8.yupoo.com/20070730/110537_739931759_gxvvqlxy.jpg"  width =375px  border =0  />
         < img  id ="img3"  height =500px  alt =""  src ="http://photo6.yupoo.com/20070730/110537_666202854_mpbiqknx.jpg"  width =375px  border =0  />
         < img  id ="img4"  height =500px  alt =""  src ="http://photo6.yupoo.com/20070730/110536_205022051_orocyrqg.jpg"  width =375px  border =0  />
         < img  id ="img5"  height =500px  alt =""  src ="http://photo8.yupoo.com/20070730/110535_1653741312_foruuosr.jpg"  width =375px  border =0  />
     </ div >
     < div  id =demo2 >
     </ div >
</ div >

< script  language ="javascript" > ...
    var speed=1;
    demo2.innerHTML=demo1.innerHTML;
    function Marquee()...{
        if(demo2.offsetTop-demo.scrollTop<=0)...{
            demo.scrollTop-=demo1.offsetHeight;
        }
        else...{
            demo.scrollTop++;
        }
    }
    var MyMar=setInterval(Marquee,speed);
    demo.onmouseover=function() ...{clearInterval(MyMar)};
    demo.onmouseout=function() ...{MyMar=setInterval(Marquee,speed)};
</ script >
</ body >

 

向下滚动图片

< body >
< div  id =demo  style ="background: #ffffff; overflow: hidden; width:400px; color: #0000ff; height: 500px" >  
     < div  id =demo1 >  
         < img  id ="img0"  height =500px  alt =""  src ="http://photo8.yupoo.com/20070730/110535_1428097478_yuniakfi.jpg"  width =375px  border =0  />
         < img  id ="img1"  height =500px  alt =""  src ="http://photo8.yupoo.com/20070730/110558_1774342009_clqycalf.jpg"  width =375px  border =0  />
         < img  id ="img2"  height =500px  alt =""  src ="http://photo8.yupoo.com/20070730/110537_739931759_gxvvqlxy.jpg"  width =375px  border =0  />
         < img  id ="img3"  height =500px  alt =""  src ="http://photo6.yupoo.com/20070730/110537_666202854_mpbiqknx.jpg"  width =375px  border =0  />
         < img  id ="img4"  height =500px  alt =""  src ="http://photo6.yupoo.com/20070730/110536_205022051_orocyrqg.jpg"  width =375px  border =0  />
         < img  id ="img5"  height =500px  alt =""  src ="http://photo8.yupoo.com/20070730/110535_1653741312_foruuosr.jpg"  width =375px  border =0  />
     </ div >
     < div  id =demo2 >
     </ div >
</ div >

< script > ...  
    var speed=1 
    demo2.innerHTML=demo1.innerHTML 
    demo.scrollTop=demo.scrollHeight 
    function Marquee()...{ 
        if(demo1.offsetTop-demo.scrollTop>=0) 
            demo.scrollTop+=demo2.offsetHeight 
        else...{ 
            demo.scrollTop-- 
        } 
    } 
    var MyMar=setInterval(Marquee,speed) 
    demo.onmouseover=function() ...{clearInterval(MyMar)} 
    demo.onmouseout=function() ...{MyMar=setInterval(Marquee,speed)} 
</ script >  
</ body >

 

向右滚动图片

< body >
< div  id =demo  style ="background: #ffffff; overflow: hidden; width:670px; color: #0000ff; height: 500px" >
     < table  cellpadding ="0"  cellspacing ="0"  border ="0" >
         < tr >
             < td  id ="demo1"  valign ="top"  align ="center" >
                 < table  cellpadding ="2"  cellspacing ="0"  border ="0" >
                     < tr  align ="center" >
                         < td >< img  id ="img0"  height =500px  alt =""  src ="http://photo8.yupoo.com/20070730/110535_1428097478_yuniakfi.jpg"  width =375px  border =0  /></ td >
                         < td >< img  id ="img1"  height =500px  alt =""  src ="http://photo8.yupoo.com/20070730/110535_1653741312_foruuosr.jpg"  width =375px  border =0  /></ td >
                         < td >< img  id ="img2"  height =500px  alt =""  src ="http://photo6.yupoo.com/20070730/110536_205022051_orocyrqg.jpg"  width =375px  border =0  /></ td >
                         < td >< img  id ="img3"  height =500px  alt =""  src ="http://photo6.yupoo.com/20070730/110537_666202854_mpbiqknx.jpg"  width =375px  border =0  /></ td >
                         < td >< img  id ="img4"  height =500px  alt =""  src ="http://photo8.yupoo.com/20070730/110537_739931759_gxvvqlxy.jpg"  width =375px  border =0  /></ td >
                         < td >< img  id ="img5"  height =500px  alt =""  src ="http://photo8.yupoo.com/20070730/110558_1774342009_clqycalf.jpg"  width =375px  border =0  /></ td >
                     </ tr >
                 </ table >
             </ td >
             < td  id ="demo2"  valign ="top" ></ td >
         </ tr >
       </ table >
</ div >

< script > ...
    var speed=1
    demo2.innerHTML=demo1.innerHTML
    function Marquee()...{
        if(demo.scrollLeft<=0)
            demo.scrollLeft+=demo2.offsetWidth
        else...{
            demo.scrollLeft--
        }
    }
    var MyMar=setInterval(Marquee,speed)
    demo.onmouseover=function() ...{clearInterval(MyMar)}
    demo.onmouseout=function() ...{MyMar=setInterval(Marquee,speed)}
</ script >
</ body >

 

向左滚动图片

< body >
< div  id =demo  style ="background: #ffffff; overflow: hidden; width:670px; color: #0000ff; height: 500px" >
     < table  cellpadding ="0"  cellspacing ="0"  border ="0" >
         < tr >
             < td  id ="demo1"  valign ="top"  align ="center" >
                 < table  cellpadding ="2"  cellspacing ="0"  border ="0" >
                     < tr  align ="center" >
                         < td >< img  id ="img0"  height =500px  alt =""  src ="http://photo8.yupoo.com/20070730/110535_1428097478_yuniakfi.jpg"  width =375px  border =0  /></ td >
                         < td >< img  id ="img1"  height =500px  alt =""  src ="http://photo8.yupoo.com/20070730/110535_1653741312_foruuosr.jpg"  width =375px  border =0  /></ td >
                         < td >< img  id ="img2"  height =500px  alt =""  src ="http://photo6.yupoo.com/20070730/110536_205022051_orocyrqg.jpg"  width =375px  border =0  /></ td >
                         < td >< img  id ="img3"  height =500px  alt =""  src ="http://photo6.yupoo.com/20070730/110537_666202854_mpbiqknx.jpg"  width =375px  border =0  /></ td >
                         < td >< img  id ="img4"  height =500px  alt =""  src ="http://photo8.yupoo.com/20070730/110537_739931759_gxvvqlxy.jpg"  width =375px  border =0  /></ td >
                         < td >< img  id ="img5"  height =500px  alt =""  src ="http://photo8.yupoo.com/20070730/110558_1774342009_clqycalf.jpg"  width =375px  border =0  /></ td >
                     </ tr >
                 </ table >
             </ td >
             < td  id ="demo2"  valign ="top" ></ td >
         </ tr >
       </ table >
</ div >

< script  language ="javascript" > ...
    var speed=1
    demo2.innerHTML=demo1.innerHTML
    function Marquee()...{
        if(demo2.offsetWidth-demo.scrollLeft<=0)
            demo.scrollLeft-=demo1.offsetWidth
        else...{
            demo.scrollLeft++
        }
    }
    var MyMar=setInterval(Marquee,speed)
    demo.onmouseover=function() ...{clearInterval(MyMar)}
    demo.onmouseout=function() ...{MyMar=setInterval(Marquee,speed)}
</ script >
</ body >

 

marquees方法向上滚动图片

< body >
< div  id ="marquees"  style ="background: #ffffff; overflow: hidden; width:400px; color: #0000ff; height: 500px" >    
       < img  id ="img0"  height =500px  alt =""  src ="http://photo8.yupoo.com/20070730/110558_1774342009_clqycalf.jpg"  width =375px  border =0  />
       < br >
       < img  id ="img1"  height =500px  alt =""  src ="http://photo8.yupoo.com/20070730/110537_739931759_gxvvqlxy.jpg"  width =375px  border =0  />
       < br >
       < img  id ="img2"  height =500px  alt =""  src ="http://photo6.yupoo.com/20070730/110537_666202854_mpbiqknx.jpg"  width =375px  border =0  />
       < br >
       < img  id ="img3"  height =500px  alt =""  src ="http://photo6.yupoo.com/20070730/110536_205022051_orocyrqg.jpg"  width =375px  border =0  />
       < br >
       < img  id ="img4"  height =500px  alt =""  src ="http://photo8.yupoo.com/20070730/110535_1653741312_foruuosr.jpg"  width =375px  border =0  />
       < br >
       < img  id ="img5"  height =500px  alt =""  src ="http://photo8.yupoo.com/20070730/110535_1428097478_yuniakfi.jpg"  width =375px  border =0  />
       < br >  
</ div >      

< script  language ="JavaScript" > ...
    marqueesHeight=200;   
    stopscroll=false;  
    with(marquees)...{   
        style.width=0;   
        style.height=marqueesHeight;   
        style.overflowX="visible";   
        style.overflowY="hidden";   
        noWrap=true;   
        onmouseover=new   Function("stopscroll=true");   
        onmouseout=new   Function("stopscroll=false");   
    }
    
    document.write('<div   id="templayer"   style="position:absolute;z-index:1;visibility:hidden"></div>');    
    preTop=0;   currentTop=0;
    
    function   init()...{   
        templayer.innerHTML="";   
        while(templayer.offsetHeight<marqueesHeight)...{   
            templayer.innerHTML+=marquees.innerHTML;   
        }   
        marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;   
        setInterval("scrollUp()",10);//越大越慢   
    }  
   
    document.body.onload=init;   
    
    function   scrollUp()...{   
        if(stopscroll==true)   return;   
        preTop=marquees.scrollTop;   
        marquees.scrollTop+=1;   
        if(preTop==marquees.scrollTop)...{   
            marquees.scrollTop=templayer.offsetHeight-marqueesHeight;   
            marquees.scrollTop+=1;   
        }   
    }   
</ script >  
</ body >