符合W3C Web標準的圖片連續(xù)無間隙水平滾動

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

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

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

<!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ù)無間隙向左滾動，無間隙向右滾動，符合W3C Web標準_</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> </head> <body> <div   class="lnmto2v"   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="ffw2deg"   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> <script type="text/javascript" language="JavaScript"> //調用向左滾動 toleft("demo","demo1","demo2",30,"hehe123") //調用向右滾動 toright("demo0","demo11","demo22",20,"hehe1123") function $(id){return document.getElementById(id)} //向左滾動函數，demo包含demo1與demo2,speed是滾動速度，flag一個網頁內有多個時設置為不同的任意字符。 //by 柳永法(yongfa365)'Blog　www.yongfa365.com function toleft(demo,demo1,demo2,speed,flag){ demo=$(demo);demo1=$(demo1);demo2=$(demo2) demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetWidth-demo.scrollLeft<=0){ demo.scrollLeft-=demo1.offsetWidth } else{ demo.scrollLeft++ } } flag=setInterval(Marquee,speed) demo.onmouseover=function(){clearInterval(flag);} demo.onmouseout=function(){flag=setInterval(Marquee,speed);} } //向右滾動函數，demo包含demo1與demo2,speed是滾動速度，flag一個網頁內有多個時設置為不同的任意字符。 //by 柳永法(yongfa365)'Blog　www.yongfa365.com function toright(demo,demo1,demo2,speed,flag){ demo=$(demo);demo1=$(demo1);demo2=$(demo2) demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo.scrollLeft<=0){ demo.scrollLeft=demo2.offsetWidth } else{ demo.scrollLeft-- } } flag=setInterval(Marquee,speed) demo.onmouseover=function(){clearInterval(flag);} demo.onmouseout=function(){flag=setInterval(Marquee,speed);} } </script> </body> </html>

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

以下為網上提供的代碼

<!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="e2cjoor"   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="9mippwi"   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> <script type="text/javascript"> /* **兼容IE,Firefox 遵循W3C標準寫法的圖片無縫滾動代碼（支持左移/右移功能）(本示例為上下兩行圖片進行雙行滾動) ** **實現思路：一個設定寬度并且隱藏超出它寬度的內容的容器demo，里面放demo1和demo2，demo1是滾動內容,demo2為demo1的直接克隆， **通過不斷改變demo1的scrollTop或者scrollLeft達到滾動的目的，當滾動至demo1與demo2的交界處時直接跳回初始位置， **因為demo1與demo2一樣，所以分不出跳動的瞬間，從而達到"無縫"滾動的目的。 */ var speed1=0    //圖片左移的速度 var MyMar1    //setInterverval方法返回的間隔ID,些ID為全局的調用次數(用于第一行圖片) var MyMar2    //setInterverval方法返回的間隔ID,些ID為全局的調用次數(用于第二行圖片) var lefthit=0        //記錄左移按鈕點擊次數 var righthit=0    ////記錄右移按鈕點擊次數 //調用右移方法前,先讓左移停止（clearInterval清除setInterval對方法的調用） function clearleft(){ clearInterval(MyMar1) clearInterval(MyMar2) } //圖片左移的方法 function toleft(){ //判斷是否是第一次按下左移按鈕（圖片往左開始移動的時候，不會在調用此方法。只有當按了右移按鈕時，才會把lefthit重設為0） if(lefthit==0){ speed1=30;//圖片左移速度時間毫秒 //讓的內容demo2與demo1內容一樣 document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML //上行圖片移動的方法 function Marquee1(){ //當demo滾動至demo2的交界處。與就是與demo2重合時。offsetWidth與scrollLeft剛好相等 if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0){ //demo跳回初始位置 document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth } else{ //demo開始重新移動 document.getElementById("demo").scrollLeft++ } } //setInterval讓Marquee1方法每隔多少秒執(zhí)行一次，并把返回的調用次數ID MyMar1=setInterval(Marquee1,speed1) //當鼠標移動demo上面時。調用clearInterval清除MyMar1.這樣圖片便不會在移動了。移到圖片時，第一行和第二行的圖片都會停止 document.getElementById("demo").onmouseover=function() {clearInterval(MyMar1);clearInterval(MyMar2)} //當鼠標移除demo時,重新setInterval讓方法執(zhí)行，這樣圖片會繼續(xù)移動 document.getElementById("demo").onmouseout=function() {MyMar1=setInterval(Marquee1,speed1);clearInterval(MyMar2);MyMar2=setInterval(Marquee2,speed1)} //下面的方法與上面的方法一樣，用于第二行的圖片向左移動 document.getElementById("demo_c").innerHTML=document.getElementById("demo_b").innerHTML function Marquee2(){ if(document.getElementById("demo_c").offsetWidth-document.getElementById("demo_a").scrollLeft<=0){ document.getElementById("demo_a").scrollLeft-=document.getElementById("demo_b").offsetWidth} else{ document.getElementById("demo_a").scrollLeft++ } } MyMar2=setInterval(Marquee2,speed1) document.getElementById("demo_a").onmouseover=function() {clearInterval(MyMar2);clearInterval(MyMar1)} document.getElementById("demo_a").onmouseout=function() {MyMar2=setInterval(Marquee2,speed1); document.getElementById("demo").onmouseout()} lefthit=1        //設置左移按鈕，當按了一次左移后(不管按多少次)，在沒按右移按鈕之前，toleft方法里的的代碼不會再被執(zhí)行 righthit=0    //把右移按鈕設為0,這樣當下次點了右移按鈕的時候，以便toright方法被調用 } } var MyMar3    //setInterverval方法返回的間隔ID,些ID為全局的調用次數(用于第一行圖片) var MyMar4    //setInterverval方法返回的間隔ID,些ID為全局的調用次數(用于第二行圖片) var speed2=0    //圖片右移的速度 //調用移左方法前,先讓右移停止（clearInterval清除setInterval對方法的調用） function clearright(){ clearInterval(MyMar3) clearInterval(MyMar4) } //圖片右移方法(與圖片左移方法思路一樣) function toright(){ //判斷是否是第一次按下右移按鈕（圖片往右開始移動的時候，不會在調用此方法。只有當按了左移按鈕時，才會把righthit重設為0） if(righthit==0){ speed2=30; document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML function Marquee_a(){ if(document.getElementById("demo").scrollLeft<=0){ document.getElementById("demo").scrollLeft=document.getElementById("demo2").offsetWidth } else{ document.getElementById("demo").scrollLeft-- } } MyMar3=setInterval(Marquee_a,speed2) document.getElementById("demo").onmouseover=function() {clearInterval(MyMar3);document.getElementById("demo_a").onmouseover()} document.getElementById("demo").onmouseout=function() {MyMar3=setInterval(Marquee_a,speed2);clearInterval(MyMar4);MyMar4=setInterval(Marquee_b,speed2)} document.getElementById("demo_c").innerHTML=document.getElementById("demo_b").innerHTML function Marquee_b(){ if(document.getElementById("demo_a").scrollLeft<=0){ document.getElementById("demo_a").scrollLeft=document.getElementById("demo_c").offsetWidth } else{ document.getElementById("demo_a").scrollLeft-- } } MyMar4=setInterval(Marquee_b,speed2) document.getElementById("demo_a").onmouseover=function() {clearInterval(MyMar4);clearInterval(MyMar3)} document.getElementById("demo_a").onmouseout=function() {MyMar4=setInterval(Marquee_b,speed2);document.getElementById("demo").onmouseout()} righthit=1    //設置右移按鈕，當按了一次右移按鈕后(不管按多少次)，在沒按左移按鈕之前，toright方法里的的代碼不會再被執(zhí)行 lefthit=0    //把左移按鈕設為0,這樣當下次點了左移按鈕的時候，以便toleft方法被調用 } } </script>

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

您可能感興趣的文章:

28個JS常用數組方法總結
最近面試有道題是至少寫出 15 個數組方法，數組方法平時經常用到的也就6-7個，突然要一下子寫出15個，還是有點卡殼了，今天整理一波，需要的可以參考一下
2022-05-05
disable-devtool禁用web開發(fā)者工具保護網頁源碼
這篇文章主要為大家介紹了disable-devtool禁用web開發(fā)者工具保護網頁源碼的使用，防止源碼泄露保護網站源碼的最佳解決方案，一行代碼就可以搞定，有需要的可以學習參考下
2023-11-11
整理Javascript流程控制語句學習筆記
整理Javascript流程控制語句學習筆記，之前一系列的文章是跟我學習Javascript，本文就是進一步學習javascript流程控制語句，希望大家繼續(xù)關注
2015-11-11
JQuery 前臺切換網站的樣式實現
本文說的是在WordPress中怎樣利用JQuery在網站的前臺切換樣式的方法?；蛘哌@篇文章的方法大家可能不是太需要，因為我覺得這是解決我被主題樣式折騰到差不多分裂的原因及結果的最后手段。
2009-06-06
js形成頁面的一種遮罩效果實例代碼
這篇文章主要介紹了js形成頁面的一種遮罩效果實例代碼，有需要的朋友可以參考一下
2014-01-01
微信小程序實現拍照畫布指定區(qū)域生成圖片
這篇文章主要為大家詳細介紹了微信小程序實現拍照畫布指定區(qū)域生成圖片，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-07-07
JavaScript使用canvas繪制隨機驗證碼
這篇文章主要為大家詳細介紹了JavaScript使用canvas繪制隨機驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-02-02
為JavaScript添加重載函數的輔助方法
大家都習慣了重載帶來的便利。JavaScript有沒有重載呢？有人會回答沒有，因為函數會被覆蓋；有人說有，我們可以模擬重載這一操作。
2010-07-07
Bootstrap 按鈕樣式與使用代碼詳解
這篇文章主要介紹了Bootstrap -- 按鈕樣式與使用，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-12-12
javascript中的parseInt和parseFloat區(qū)別
這篇文章用簡單的小例子演示了parseInt和parseFloat區(qū)別，有需要的朋友可以參考一下
2013-07-07