javascript實現圖片無縫滾動（scrollLeft的用法介紹）

最後更新：2014-04-30 來源：互聯網

上載者：User

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

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<style>
.piczhanshi{width:976px;height:167px;border:1px #999999 solid;margin:0 auto;}
h3{
float:left;
background-color: #DDD;
float: left;
height: 35px;
width: 966px;
margin-top: 2px;
line-height: 35px;
text-align: center;
color: #064278;
font-size: 18px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
}
.tupian{
float:left;
width:966px;
height:120px;
margin-left:5px;margin-right:5px;
}
.demo{width:966px;height:110px;overflow:hidden;margin-top:5px;margin-bottom:5px;} //這個是scrollLeft作用的層，實現移動效果的是他的子級divindexmo
#indemo{width:800%;height:110px;} //這裡的寬度為他的父級div層的8倍寬
.demo1,.demo2{float:left;}
</style>
</head>

<body>
<div id="piczhanshi" class="piczhanshi">
<h3>鳥巢</h3>
<div id="tupian" class="tupian">//這裡是包含圖片的最外層div是為了定位而設定的與滾動沒關係
<div id="demo" class="demo"> // 這裡是包含圖片的div，也就是需要實現子級div滾動的層（scrollLeft是相對於當前層的子層的），這裡必須這是好寬高已經overflow：hidden
<div id="indemo"> //這個是需要滾動的圖片包含層，他的寬度在圖片左右滾動效果下，比他的父級div的寬大，這裡設定為800%，也就是相當他的父級div來說，他等於父級div寬的8倍
<div id="demo1" class="demo1">//這裡是包含圖片的層，通過“float”和demo2實現無縫串連
<img src="image/niaochao1.jpg" />
<img src="image/niaochao2.jpg" />
<img src="image/niaochao3.jpg" />
<img src="image/niaochao4.jpg" />
<img src="image/niaochao5.jpg" />
<img src="image/niaochao6.jpg" />
<img src="image/niaochao7.jpg" />
<img src="image/niaochao8.jpg" />
<img src="image/niaochao9.jpg" />

</div>
<div id="demo2" class="demo2"></div>//這裡通過js代碼“ tab2.innerHTML=tab1.innerHTML;”得到demo1的值，通過“float”和demo1實現無縫串連
</div>
</div>
</div>
</div>
<script language="javascript">
var speed=20;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML; //通過賦值獲得tab1的值
function marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)//當tab的移動寬度大於等於demo1的時候，scrollLeft為0，也就是恢複到未移動前的情況，繼續移動
{tab.scrollLeft=0}
else
{tab.scrollLeft++;} //圖片層不斷的往left移動
}
var timer=setInterval(marquee,speed); //定時器
tab.onmouseover=function(){clearInterval(timer)};//滑鼠經過容器的時候清除定時器
tab.onmouseout=function(){timer=setInterval(marquee,speed);}//滑鼠移開容器的時候開始定時器
</script>

</body>

</html>

*******************2004-04-26，最佳化後，點擊左右的圖片就清除自動滾動的定時器，實現點擊的時候可以滾動相應的像素************************

<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<style>
.main{width:980px;height:190px;border:1px #999999 solid;margin:0 auto;}
h3{width:980px;height:30px;text-align:center;color:#3399FF;float:left;}
.tupian{width:980px;height:139px;float:left;position:relative;}
.indemo{width:800%;height:139px;}
.demo{width:948px;height:160px;float:left;overflow:hidden;}
.demo1{float:left;}
.demo2{float:left;}
.right{height:89px;width:16px;left:0;margin-top:40px;float:left;}
.left{height:89px;width:16px;margin-top:40px;float:left;}
</style>
</head>
<body>
<div id="main" class="main">
<h3>鳥巢展示圖</h3>
<div id="tupian" class="tupian">
<div class="left"><img src="images/but_l2.jpg" class="lt" id="lt" /></div>
<div id="demo" class="demo">
<div id="indemo" class="indemo">
<div id="demo1" class="demo1">
<img src="images/niaochao1.jpg" />
<img src="images/niaochao2.jpg" />
<img src="images/niaochao3.jpg" />
<img src="images/niaochao4.jpg" />
<img src="images/niaochao5.jpg" />
<img src="images/niaochao6.jpg" />
<img src="images/niaochao7.jpg" />
<img src="images/niaochao8.jpg" />
<img src="images/niaochao9.jpg" />
</div>
<div id="demo2" class="demo2"></div>
</div>
</div>
<div class="right"><img src="images/but_r2.jpg" class="rt" id="rt" /></div>
</div>
</div>
<script type="text/javascript">
var speed=20;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
var lt=document.getElementById("lt");
var rt=document.getElementById("rt");
tab2.innerHTML=tab1.innerHTML;
function marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
{tab.scrollLeft=0}
else
{tab.scrollLeft++;}
}
var timer=setInterval(marquee,speed);
tab.onmouseover=function(){clearInterval(timer)};
tab.onmouseout=function(){timer=setInterval(marquee,speed)}

rt.onmouseout=function(){timer=setInterval(marquee,speed)}; //因為設定了點擊表徵圖的的時候清除定時器，所以這裡必須在移開滑鼠的時候開始定時器
lt.onmouseout=function(){timer=setInterval(marquee,speed)};

lt.onclick=function(){ //點擊左表徵圖時候運行
clearInterval(timer); //清除定時器
if(tab.scrollLeft>=1440){tab.scrollLeft=0;} //當層往左移動的像素大於1440的時候，scrillLeft返回0
else{tab.scrollLeft+=160} //不斷的往左滾
}

rt.onclick=function(){ //點擊右邊滑鼠的時候
clearInterval(timer);//清除定時器
if(tab.scrollLeft==0){tab.scrollLeft=1440;} //scroll為0的時候（這裡必須注意，if裡面是用“==”，是對比的意思，{}裡面的“=”是賦值的意思，不能弄混），scrollLeft返回0
else if(tab.scrollLeft<=-1440){tab.scrollLeft=0;}//當scrollLeft少於1440的時候，scrollLeft返回0，同時）if（）{} else{}之間是不存在任何標記符號的，這是格式

else{tab.scrollLeft-=160;}
}
</script>
</body>
</html>

本文章原先以中文撰寫並發佈於 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

javascript實現圖片無縫滾動（scrollLeft的用法介紹）

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support