素材：你要輪流播放的圖片1，圖片2，圖片3，。。。

代碼：

要怎么實(shí)現(xiàn)圖片輪播呢？

圖片是怎么放到網(wǎng)上的呢？

使用標(biāo)簽

這個(gè)標(biāo)簽里面可以放1張圖片，

在一個(gè)時(shí)間間隔之后，

改變?yōu)榱硗庖粡垐D片。

怎么更改標(biāo)簽內(nèi)容呢？

怎么停留一段時(shí)間間隔呢？

setInterval(ChangeImg,2000);

使用這個(gè)函數(shù)，可以每隔2秒就調(diào)用ChangeImg函數(shù)，實(shí)現(xiàn)停留一段間隔。

怎么更改圖片內(nèi)容呢？

如果圖片剛開始播放圖片1

怎么換到圖片2，圖片3呢

首先，要獲得所有的圖片，所有的圖片放入一個(gè)集合里面。

然后按

下標(biāo)從0開始，先顯示下標(biāo)為0的圖片，

隔了1段時(shí)間，再顯示下標(biāo)是1的圖片，

依次實(shí)現(xiàn)輪播。

代碼：

ps=new Array("hua1.jpg","hua2.jpg","a.jpeg","hua3.jpg");

var i=0;

function hanshu()

{

i++;

if(i>=ps.length)

i=0;

document.getElementById("tu").src=ps[i];

}

setInterval(hanshu,1000);

還有一個(gè)方法：

參考：

輪播圖實(shí)現(xiàn)

/*標(biāo)題樣式*/

p{

text-align: center;

font-size: 25px;

color: cadetblue;

font-family: fantasy;

}

.imgBox{

border-top: 2px solid cadetblue;

width: 50%;

height: 500px;

margin: 0 auto;

}

.imgBox img{

width: 60%;

height: 300px;

margin: 0 auto;

padding-top: 30px;

}

.img1{

display: block;

}

.img2{

display: none;

}

.img3{

display: none;

}

圖片輪播

var index=0;

//改變圖片

function ChangeImg() {

index++;

var a=document.getElementsByClassName("img-slide");

if(index>=a.length) index=0;

for(var i=0;i

a[i].style.display='none';

}

a[index].style.display='block';

}

//設(shè)置定時(shí)器，每隔兩秒切換一張圖片

setInterval(ChangeImg,2000);

讀者可以比較2份代碼，從中體會(huì)學(xué)習(xí)。

本文來(lái)自投稿，不代表文案館立場(chǎng)，如若轉(zhuǎn)載，請(qǐng)注明出處：https://wpbbw.com/2873.html

總結(jié)

以上是生活随笔為你收集整理的html论坛原理,html图片轮播原理的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。