控制图片循环滚动方向

最新推荐文章于 2024-09-24 15:19:32 发布

原创最新推荐文章于 2024-09-24 15:19:32 发布 · 856 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#border #table #class #function #div #html

{把以下代码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 >

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

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

< TD id =demo2 width ="0" ></ TD >

</ TR ></ TBODY ></ TABLE ></ DIV >

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