快捷導(dǎo)航

JavaScript代碼實(shí)現(xiàn)圖片循環(huán)滾動(dòng)效果

更新時(shí)間：2020年03月19日 10:56:05 作者：柯南&

這篇文章主要介紹了JavaScript代碼實(shí)現(xiàn)圖片循環(huán)滾動(dòng)效果的相關(guān)資料,非常不錯(cuò)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

1.概述

循環(huán)滾動(dòng)圖片，不僅可以增添Web頁(yè)面的動(dòng)態(tài)效果，而且可以節(jié)省頁(yè)面空間，有效地保證在有限的頁(yè)面中顯示更多的圖片。

2.技術(shù)要點(diǎn)

主要應(yīng)用setTimeout()方法實(shí)現(xiàn)圖片的循環(huán)滾動(dòng)效果。setTimeout()方法的語(yǔ)法格式如下：

setTimeout（function,milliseconds,[arguments]）

參數(shù)說(shuō)明：

a. function：要調(diào)用的JavaScript自定義函數(shù)名稱(chēng)。

b. Milliseconds：設(shè)置超時(shí)時(shí)間（以毫秒為單位）。

功能：經(jīng)過(guò)超時(shí)時(shí)間后，調(diào)用函數(shù)。此值可以用clearTimeout()函數(shù)清除。

3.具體實(shí)現(xiàn)

（1）在頁(yè)面的合適位置添加一個(gè)id屬性為demo的<div>標(biāo)記，并在該標(biāo)記中添加表格及要要滾動(dòng)顯示的圖片。關(guān)鍵代碼如下：

<div id="demo" style=" overflow: hidden; width: 455px; height: 166px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" id="marquePic1">
<!-- 要循環(huán)滾動(dòng)的圖片 -->
<table width="455" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr align="center">
<%for(int i=1;i<8;i++){%>
<td> <img src="Images/<%=i%>.jpg" width="118" height="166" border="1"> </td>
<%}%>
</tr>
</table>
</td>
<td id="marquePic2" width="1"></td>
</tr>
</table>
</div>

（2）編寫(xiě)自定義的JavaScript函數(shù)move()，用于實(shí)現(xiàn)無(wú)間斷的圖片循環(huán)滾動(dòng)效果。speed數(shù)值越大圖片滾動(dòng)的越快，具體代碼如下：

<script language="javascript">
var speed=30 ; //設(shè)置間隔時(shí)間
marquePic2.innerHTML=marquePic1.innerHTML;
var demo=document.getElementById("demo"); //獲取demo對(duì)象
function Marquee(n){ //實(shí)現(xiàn)圖片循環(huán)滾動(dòng)的方法
if(marquePic1.offsetWidth-demo.scrollLeft<=0){ 
demo.scrollLeft=0; 
}
else{ 
demo.scrollLeft=demo.scrollLeft+n;
} 
} 
var MyMar=setInterval("Marquee(5)",speed);
demo.onmouseover=function() { //停止?jié)L動(dòng)
clearInterval(MyMar);
} 
demo.onmouseout=function() { //繼續(xù)滾動(dòng)
MyMar=setInterval("Marquee(5)",speed);
}
</script>

知識(shí)點(diǎn)補(bǔ)充：javascript實(shí)現(xiàn)頁(yè)面的自動(dòng)循環(huán)滾動(dòng)

首先html代碼

<div id="content">
<ol id="EG-CN-1">EG-CN-1
<li type="none">aatox</li>
<li type="none">akari</li></ol>
<ol id="EG-CN-10">EG-CN-10<li type="none">rakan</li></ol>
<ol id="EG-CN-7">EG-CN-7<li type="none">riven</li>
<li type="none">darius</li></ol>
<ol id="EG-CN-8">EG-CN-8<li type="none">fiora</li>
<li type="none">jayce</li>
<li type="none">noc</li></ol>
<ol id="EG-CN-2">EG-CN-2<li type="none">leesin</li></ol></div>

這是一個(gè)通過(guò)js自動(dòng)添加list的div容器，隨著名單的長(zhǎng)度增加會(huì)自動(dòng)增加scrollheight，而整個(gè)div是固定的寬高，通過(guò)css的overflow：scroll屬性自動(dòng)將多出的內(nèi)容隱藏在scrollview里面
css代碼如下，這里同時(shí)使用：：-webkit-scrollbar 將滾動(dòng)條隱藏以保證美觀性

#content{
 width:430px;height:490px;
 position:absolute; top:180px;left:40%;
 font-size:20px;overflow:scroll;

}
#content::-webkit-scrollbar{display:none}
ol{font-size:35px}
li{font-size:25px}

接下來(lái)就是實(shí)現(xiàn)自動(dòng)循環(huán)滾動(dòng)的js代碼

原理就是先讀取div元素的高度以及div內(nèi)部?jī)?nèi)容的高度即clientHeight和scrollHeight屬性來(lái)確定滾動(dòng)條到頂部的最大距離h=clientHeight-scrollHeight，然后通過(guò)setInterval來(lái)實(shí)現(xiàn)滾動(dòng)條到頂部的距離scrollTop屬性的從0開(kāi)始遞增直到達(dá)到最大距離h，然后再將scrollTop歸零，重新開(kāi)始滾動(dòng)

$(document).ready(function(){
content=document.getElementById('content')
clientheight=content.clientHeight
offsetheight=content.scrollHeight
h=offsetheight-clientheight
var position=0
function startscroll(){
if(content.scrollTop<h){position++;content.scrollTop=position}
if(content.scrollTop>=h){content.scrollTop=0;position=0}
}
setInterval(startscroll,100)

console.log(clientheight)
console.log(offsetheight)

})

總結(jié)

以上所述是小編給大家介紹的JavaScript代碼實(shí)現(xiàn)圖片循環(huán)滾動(dòng)效果的相關(guān)知識(shí)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: