1.概述

循環滾動圖片，不僅可以增添Web頁面的動態效果，而且可以節省頁面空間，有效地保證在有限的頁面中顯示更多的圖片。

2.技術要點

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

setTimeout(function,milliseconds,[arguments])

參數說明：

a. function：要調用的JavaScript自定義函數名稱。

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

功能：經過超時時間后，調用函數。此值可以用clearTimeout()函數清除。

3.具體實現

(1)在頁面的合適位置添加一個id屬性為demo的

標記，并在該標記中添加表格及要要滾動顯示的圖片。關鍵代碼如下：

(2)編寫自定義的JavaScript函數move()，用于實現無間斷的圖片循環滾動效果。speed數值越大圖片滾動的越快，具體代碼如下：

var speed=30 ; //設置間隔時間

marquePic2.innerHTML=marquePic1.innerHTML;

var demo=document.getElementById("demo"); //獲取demo對象

function Marquee(n){ //實現圖片循環滾動的方法

if(marquePic1.offsetWidth-demo.scrollLeft<=0){

demo.scrollLeft=0;

}

else{

demo.scrollLeft=demo.scrollLeft+n;

}

}

var MyMar=setInterval("Marquee(5)",speed);

demo.οnmοuseοver=function() { //停止滾動

clearInterval(MyMar);

}

demo.οnmοuseοut=function() { //繼續滾動

MyMar=setInterval("Marquee(5)",speed);

}

知識點補充：javascript實現頁面的自動循環滾動

首先html代碼

EG-CN-1

aatox

akari

EG-CN-10

rakan

EG-CN-7

riven

darius

EG-CN-8

fiora

jayce

noc

EG-CN-2

leesin

這是一個通過js自動添加list的div容器，隨著名單的長度增加會自動增加scrollheight，而整個div是固定的寬高，通過css的overflow：scroll屬性自動將多出的內容隱藏在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}

接下來就是實現自動循環滾動的js代碼

原理就是先讀取div元素的高度以及div內部內容的高度即clientHeight和scrollHeight屬性來確定滾動條到頂部的最大距離h=clientHeight-scrollHeight，然后通過setInterval來實現滾動條到頂部的距離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

if(content.scrollTop>=h){content.scrollTop=0;position=0}

}

setInterval(startscroll,100)

console.log(clientheight)

console.log(offsetheight)

})

總結

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

總結

以上是生活随笔為你收集整理的html中图片自动循环滚动代码,JavaScript代码实现图片循环滚动效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。