快捷導(dǎo)航

符合W3C Web標(biāo)準(zhǔn)的圖片連續(xù)無間隙水平滾動(dòng)

更新時(shí)間：2008年06月30日 22:16:45 作者：

很久以前就有這個(gè)問題，總是找不到通用的，或比較簡單的“圖片連續(xù)無間隙向左滾動(dòng)，無間隙向右滾動(dòng)，符合W3C Web標(biāo)準(zhǔn)”

這次又遇上一個(gè)這樣的問題，找了老半天終于從網(wǎng)上找到一個(gè)不錯(cuò)的，看了下代碼，思路很簡單，但代碼太多，通用性也不行，于是乎，自己又發(fā)明了兩個(gè)函數(shù)，用起來感覺還真不錯(cuò)，與大家共享：

<!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> <title>圖片連續(xù)無間隙向左滾動(dòng)，無間隙向右滾動(dòng)，符合W3C Web標(biāo)準(zhǔn)_</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> </head> <body> <div   class="wppm3vysvbp"   id="demo" style="overflow: hidden; width: 322px; height: 61px"> <table cellpadding="0" align="left" border="0" cellspace="0"> <tr> <td id="demo1" valign="top"><table cellspacing="0" cellpadding="0" width="322" bgcolor="#fffbf7" border="0"> <tr align="center"> <td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td> <td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td> <td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td> <td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td> <td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td> </tr> </table></td> <td id="demo2" valign="top"></td> </tr> </table> </div> <div   class="wppm3vysvbp"   id="demo0" style="overflow: hidden; width: 322px; height: 61px"> <table cellpadding="0" align="left" border="0" cellspace="0"> <tr> <td id="demo11" valign="top"><table cellspacing="0" cellpadding="0" width="322" bgcolor="#fffbf7" border="0"> <tr align="center"> <td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td> <td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td> <td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td> <td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td> <td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td> </tr> </table></td> <td id="demo22" valign="top"></td> </tr> </table> </div>  </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

以下為網(wǎng)上提供的代碼

<!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> <title>Untitled Document</title> </head> <body> <img src="images/butt_arrowl.gif" style="cursor:pointer" onmouseover="clearright();toleft()"/> <img src="images/butt_arrowr.gif"style="cursor:pointer" onmouseover="clearleft();toright()"/> <div> <div   class="wppm3vysvbp"   id="demo" style="OVERFLOW: hidden; WIDTH: 322px; HEIGHT: 61px"> <table cellpadding="0" align="left" border="0" cellspace="0"> <tbody> <tr> <td id="demo1" valign="top"><table cellspacing="0" cellpadding="0" width="322" bgcolor="#fffbf7" border="0"> <tbody> <tr align="center"> <td width="50" height="50"><img height="50" src="images/photo_small01.jpg" /> </td> <td width="50" height="50"><img height="50" src="images/photo_small02.jpg" /> </td> <td width="50" height="50"><img height="50" src="images/photo_small03.jpg" /> </td> <td width="50" height="50"><img height="50" src="images/photo_small06.jpg" /> </td> <td width="50" height="50"><img height="50" src="images/photo_small05.jpg" /> </td> </tr> </tbody> </table></td> <td id="demo2" valign="top"></td> </tr> </tbody> </table> </div> </div> <div> <div   class="wppm3vysvbp"   id="demo_a" style="OVERFLOW: hidden; WIDTH: 322px; HEIGHT: 61px"> <table cellpadding="0" align="left" border="0" cellspace="0"> <tbody> <tr> <td id="demo_b" valign="top"><table cellspacing="0" cellpadding="0" width="322" bgcolor="#fffbf7" border="0"> <tbody> <tr align="center"> <td width="50" height="50"><img height="50" src="images/photo_small04.jpg" /> </td> <td width="50" height="50"><img height="50" src="images/photo_small07.jpg" /> </td> <td width="50" height="50"><img height="50" src="images/photo_small08.jpg" /> </td> <td width="50" height="50"><img height="50" src="images/photo_small09.gif" /> </td> <td width="50" height="50"><img height="50" src="images/photo_small01.jpg" /> </td> </tr> </tbody> </table></td> <td id="demo_c" valign="top"></td> </tr> </tbody> </table> </div> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: