javascript圖片連續無間隙水平向左滾動，無間隙水平向右滾動，符合W3C Web標準

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

很久以前就有這個問題，總是找不到通用的，或比較簡單的“圖片連續無間隙向左滾動，無間隙向右滾動，符合W3C Web標準”，這次又遇上一個這樣的問題，找了老半天終於從網上找到一個不錯的，看了下代碼，思路很簡單，但代碼太多，通用性也不行，於是乎，自己又發明了兩個函數，用起來感覺還真不錯，與大家共用：

<!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>圖片連續無間隙向左滾動，無間隙向右滾動，符合W3C Web標準</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<div 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="http://www.yonfa365.com.jpg/" /> </td>
<td width="50" height="50"><img height="50" src="http://www.yonfa365.com.jpg/" /> </td>
<td width="50" height="50"><img height="50" src="http://www.yonfa365.com.jpg/" /> </td>
<td width="50" height="50"><img height="50" src="http://www.yonfa365.com.jpg/" /> </td>
<td width="50" height="50"><img height="50" src="http://www.yonfa365.com.jpg/" /> </td>
</tr>
</table></td>
<td id="demo2" valign="top"></td>
</tr>
</table>
</div>
<div 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="http://www.yonfa365.com.jpg/" /> </td>
<td width="50" height="50"><img height="50" src="http://www.yonfa365.com.jpg/" /> </td>
<td width="50" height="50"><img height="50" src="http://www.yonfa365.com.jpg/" /> </td>
<td width="50" height="50"><img height="50" src="http://www.yonfa365.com.jpg/" /> </td>
<td width="50" height="50"><img height="50" src="http://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一個網頁內有多個時設定為不同的任一字元。
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一個網頁內有多個時設定為不同的任一字元。
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>
---------------

以下為網上提供的代碼

<!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 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 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方法每隔多少秒執行一次，並把返回的調用次數ID
MyMar1=setInterval(Marquee1,speed1)
//當滑鼠移動demo上面時。調用clearInterval清除MyMar1.這樣圖片便不會在移動了。移到圖片時，第一行和第二行的圖片都會停止
document.getElementById("demo").onmouseover=function()
{clearInterval(MyMar1);clearInterval(MyMar2)}
//當滑鼠移除demo時,重新setInterval讓方法執行，這樣圖片會繼續移動
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方法裡的的代碼不會再被執行
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方法裡的的代碼不會再被執行
lefthit=0    //把左移按鈕設為0,這樣當下次點了左移按鈕的時候，以便toleft方法被調用
}
}
</script>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More