控制图片循环滚动方向

 

{把以下代码copy到这儿，点击“运行代码”按钮}
提示：你可以先修改部分代码再运行

      鼠标移到左右图标上时改变图片循环滚动方向

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >< HEAD >< TITLE > 图片左右滚动，带有左右方向控制 </ TITLE >
< META  http-equiv =Content-Type  content ="text/html; charset=gb2312" >
< STYLE  type =text/css > ... TD {...}{
    FONT-SIZE: 12px
}
A:link {...}{
    COLOR: #a83300; TEXT-DECORATION: none
}
A:visited {...}{
    COLOR: #a83300; TEXT-DECORATION: none
}
A:active {...}{
    COLOR: #a83300; TEXT-DECORATION: underline
}
A:hover {...}{
    COLOR: #a83300; TEXT-DECORATION: underline
}
/**//**/

</ STYLE >

</ HEAD >
< BODY  bgColor =#ffffff  leftMargin =0  topMargin =0  marginheight ="0"  marginwidth ="0" >
< CENTER >

< table  border ="0"  width ="490"  cellspacing ="5"  cellpadding ="0" >
     < tr >
         < td  width ="20" >< img  id ="r_left"  onMouseOver ="r_left()"  onMouseOut ="Marquee()" src ="http://www.soojs.com/upload/2007/7/27/moveleft.gif" >
         </ td >
         < td >
< TABLE  cellSpacing =0  cellPadding =0  width =450  border =0 >
   < TBODY >
   < TR >
     < TD  vAlign =top  background =""  height =120 >
       < TABLE  cellSpacing =0  cellPadding =0  width =450  border =0 >
         < TBODY >
         < TR >
           < TD  vAlign =center  align =middle  height =120 >
<!-- ------------------demo start---------------- -->
           < DIV  id =demo  style ="OVERFLOW: hidden; WIDTH: 450px; COLOR: #ffffff; HEIGHT: 120px" >
             < TABLE  cellPadding =0  width ="100%"  align =left  border =0 
             cellspace ="0" >
               < TBODY >
               < TR >
<!-- ------------------demo1------------------- -->
                   < TD  id =demo1  vAlign =top >
                   < TABLE  cellSpacing =1  cellPadding =1 >
                     < TBODY >
                     < TR  vAlign =top >
                       < TD  vAlign =top  noWrap >
                         < DIV  align =right >
                         < TABLE  cellSpacing =0  cellPadding =0  align =center  border =0 >
                           < TBODY >
                           < TR >
                             < TD  align =middle >
                               < TABLE  cellSpacing =0  cellPadding =0  width =150 
                               align =center  border =0 >
                                 < TBODY >
                                 < TR >
                                 < TD  align =middle  height =100 >< A 
                                 href ="#"  
                                target =_blank >< IMG  height =98 
                                 src ="pic1.jpg"  ait ="pic1"  width =130 
                                 border =0 ></ A ></ TD ></ TR >
                                 < TR >
                                 < TD  class =nav1  align =middle  height =20 >< A 
                                 class =apm2 
                                 href ="#"  
                                target =_blank > pic1 </ A ></ TD ></ TR ></ TBODY ></ TABLE ></ TD >
                             < TD  align =middle >
                               < TABLE  cellSpacing =0  cellPadding =0  width =150 
                               align =center  border =0 >
                                 < TBODY >
                                 < TR >
                                 < TD  align =middle  height =100 >< A 
                                 href ="#"  
                                target =_blank >< IMG  height =98 
                                 src ="pic2.jpg"  ait ="pic2"  width =130 
                                 border =0 ></ A ></ TD ></ TR >
                                 < TR >
                                 < TD  class =nav1  align =middle  height =20 >< A 
                                 class =apm2 
                                 href ="#"  
                                target =_blank > pic2 </ A ></ TD ></ TR ></ TBODY ></ TABLE ></ TD >
                             < TD  align =middle >
                               < TABLE  cellSpacing =0  cellPadding =0  width =150 
                               align =center  border =0 >
                                 < TBODY >
                                 < TR >
                                 < TD  align =middle  height =100 >< A 
                                 href ="#"  
                                target =_blank >< IMG  height =98 
                                 src ="pic3.jpg"  ait ="pic3"  width =130 
                                 border =0 ></ A ></ TD ></ TR >
                                 < TR >
                                 < TD  class =nav1  align =middle  height =20 >< A 
                                 class =apm2 
                                 href ="#"  
                                target =_blank > pic3 </ A ></ TD ></ TR ></ TBODY ></ TABLE ></ TD >
                             < TD  align =middle >
                               < TABLE  cellSpacing =0  cellPadding =0  width =150 
                               align =center  border =0 >
                                 < TBODY >
                                 < TR >
                                 < TD  align =middle  height =100 >< A 
                                 href ="#"  
                                target =_blank >< IMG  height =98 
                                 src ="pic4.jpg"  ait ="pic4"  width =130 
                                 border =0 ></ A ></ TD ></ TR >
                                 < TR >
                                 < TD  class =nav1  align =middle  height =20 >< A 
                                 class =apm2 
                                 href ="#"  
                                target =_blank > pic4 </ A ></ TD ></ TR ></ TBODY ></ TABLE ></ TD >
                             < TD  align =middle >
                               < TABLE  cellSpacing =0  cellPadding =0  width =150 
                               align =center  border =0 >
                                 < TBODY >
                                 < TR >
                                 < TD  align =middle  height =100 >< A 
                                 href ="#"  
                                target =_blank >< IMG  height =98 
                                 src ="pic5.jpg"  ait ="pic5"  width =130 
                                 border =0 ></ A ></ TD ></ TR >
                                 < TR >
                                 < TD  class =nav1  align =middle  height =20 >< A 
                                 class =apm2 
                                 href ="#"  
                                target =_blank > pic5 </ A ></ TD ></ TR ></ TBODY ></ TABLE ></ TD >
                             < TD  align =middle >
                               < TABLE  cellSpacing =0  cellPadding =0  width =150 
                               align =center  border =0 >
                                 < TBODY >
                                 < TR >
                                 < TD  align =middle  height =100 >< A 
                                 href ="#"  
                                target =_blank >< IMG  height =98 
                                 src ="pic6.jpg"  ait ="pic6"  width =130 
                                 border =0 ></ A ></ TD ></ TR >
                                 < TR >
                                 < TD  class =nav1  align =middle  height =20 >< A 
                                 class =apm2 
                                 href ="#"  
                                target =_blank > pic6 </ A ></ TD ></ TR ></ TBODY ></ TABLE ></ TD >
                                                     </ TR ></ TBODY ></ TABLE ></ DIV ></ TD ></ TR ></ TBODY ></ TABLE ></ TD >
<!-- -----------------demo2------------------- -->
                   < TD  id =demo2  width ="0" ></ TD >
                              </ TR ></ TBODY ></ TABLE ></ DIV >
<!-- ------------------demo end---------------- -->
< SCRIPT > ...
var dir=1//每步移动像素，大＝快
var speed=1//循环周期（毫秒）大＝慢
demo2.innerHTML=demo1.innerHTML
function Marquee()...{//正常移动
    //alert(demo2.offsetWidth+" "+demo.scrollLeft)
    if (dir>0  && (demo2.offsetWidth-demo.scrollLeft)<=0) demo.scrollLeft=0
    if (dir<0 &&(demo.scrollLeft<=0)) demo.scrollLeft=demo2.offsetWidth
    demo.scrollLeft+=dir
    
    demo.onmouseover=function() ...{clearInterval(MyMar)}//暂停移动
    demo.onmouseout=function() ...{MyMar=setInterval(Marquee,speed)}//继续移动
}
function r_left()...{if (dir=-1)dir=1}//换向左移
function r_right()...{if (dir=1)dir=-1}//换向右移


var MyMar=setInterval(Marquee,speed)

</ SCRIPT >
           </ TD ></ TR ></ TBODY ></ TABLE ></ TD ></ TR ></ TBODY ></ TABLE >
         </ td >
         < td  width ="20" >< img  id ="r_r"  onMouseOver ="r_right()"  onMouseOut ="Marquee()"  src ="http://www.soojs.com/upload/2007/7/27/moveright.gif" >
         </ td >
     </ tr >
</ table >
</ CENTER >
</ BODY ></ HTML >