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

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

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

1.概述

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

2.技術要點

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

setTimeout（function,milliseconds,[arguments]）

參數(shù)說明：

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

b. Milliseconds：設置超時時間（以毫秒為單位）。

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

3.具體實現(xiàn)

（1）在頁面的合適位置添加一個id屬性為demo的<div>標記，并在該標記中添加表格及要要滾動顯示的圖片。關鍵代碼如下：

<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)滾動的圖片 -->
<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）編寫自定義的JavaScript函數(shù)move()，用于實現(xiàn)無間斷的圖片循環(huán)滾動效果。speed數(shù)值越大圖片滾動的越快，具體代碼如下：

<script language="javascript">
var speed=30 ; //設置間隔時間
marquePic2.innerHTML=marquePic1.innerHTML;
var demo=document.getElementById("demo"); //獲取demo對象
function Marquee(n){ //實現(xiàn)圖片循環(huán)滾動的方法
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動
clearInterval(MyMar);
} 
demo.onmouseout=function() { //繼續(xù)滾動
MyMar=setInterval("Marquee(5)",speed);
}
</script>

知識點補充：javascript實現(xiàn)頁面的自動循環(huán)滾動

首先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>

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

#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}

接下來就是實現(xiàn)自動循環(huán)滾動的js代碼

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

$(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)

})

總結

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

您可能感興趣的文章: