基于javascript數(shù)組實(shí)現(xiàn)圖片輪播
更新時(shí)間：2016年05月02日 19:53:12 作者：尼阿卡
這篇文章主要為大家詳細(xì)介紹了基于javascript數(shù)組實(shí)現(xiàn)圖片輪播的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
圖片輪播的辦法有多種，在這里介紹一種簡(jiǎn)單的：js數(shù)組實(shí)現(xiàn)。
首先將圖片路徑存儲(chǔ)在數(shù)組中，然后再調(diào)用setInterval函數(shù)來依次輪播圖片
<script type="text/javascript">
var curIndex = 0;
var timeInterval = 1000;
var arr = new Array();
arr[0] = "1.png";
arr[1] = "2.png";
arr[2] = "3.png";
arr[3] = "4.png";
arr[4] = "5.png";
setInterval(changeImg,timeInterval);
function changeImg() {
var obj = document.getElementById("imge");
if (curIndex == arr.length-1) {
curIndex = 0;
} else {
curIndex += 1;
}
obj.src = arr[curIndex];
}
</script>
完整實(shí)例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用數(shù)組實(shí)現(xiàn)圖片自動(dòng)輪播</title>
<style type="text/css">
#main{
width: 700px;
height: 450px;
margin: 0 auto;
text-align: center;
}
</style>
<script type="text/javascript">
var curIndex = 0;
var timeInterval = 1000;
var arr = new Array();
arr[0] = "1.png";
arr[1] = "2.png";
arr[2] = "3.png";
arr[3] = "4.png";
arr[4] = "5.png";
setInterval(changeImg,timeInterval);
function changeImg() {
var obj = document.getElementById("imge");
if (curIndex == arr.length-1) {
curIndex = 0;
} else {
curIndex += 1;
}
obj.src = arr[curIndex];
}
</script>
</head>
<body>
<div id="main">
<h1>使用數(shù)組實(shí)現(xiàn)圖片自動(dòng)輪播</h1>
<img id = "imge" src = "1.png" alt="picture" />
</div>
</body>
</html>
精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
相關(guān)文章
element-ui組件中input等的change事件中傳遞自定義參數(shù)
這篇文章主要介紹了element-ui組件中的input等的change事件中傳遞自定義參數(shù)的實(shí)例代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
JS 實(shí)現(xiàn)隨機(jī)驗(yàn)證碼功能
驗(yàn)證碼驗(yàn)證是網(wǎng)頁常出現(xiàn)的一個(gè)驗(yàn)證點(diǎn)，所謂驗(yàn)證碼類型有很多，下面代碼只是實(shí)現(xiàn)一個(gè)簡(jiǎn)單的驗(yàn)證功能，需要的朋友參考下2017-02-02
這篇文章主要介紹了JS精確判斷數(shù)據(jù)類型代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
微信小程序用戶授權(quán)彈窗 拒絕時(shí)引導(dǎo)用戶重新授權(quán)實(shí)現(xiàn)
我們?cè)陂_發(fā)小程序時(shí)，如果想獲取用戶信息，就需要獲取用的授權(quán)，如果用戶誤點(diǎn)了拒絕授權(quán)，我們?cè)趺礃尤フ_的引導(dǎo)用戶重新授權(quán)呢。今天就來給大家講講如果正確的引導(dǎo)用戶授權(quán),需要的朋友可以參考下2019-07-07
js獲取兩個(gè)數(shù)組對(duì)象的差集實(shí)現(xiàn)方法
這篇文章主要為大家介紹了js獲取兩個(gè)數(shù)組對(duì)象的差集實(shí)現(xiàn)方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要介紹了頁面滾動(dòng)事件的基礎(chǔ)概念、應(yīng)用場(chǎng)景及優(yōu)化技巧,幫助開發(fā)者在實(shí)際項(xiàng)目中靈活使用滾動(dòng)事件,提升用戶體驗(yàn),文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
本篇文章要是對(duì)JS中的OffsetParent屬性進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所 幫助2014-01-01
js實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車有圖有代碼
這篇文章主要介紹了用js實(shí)現(xiàn)的簡(jiǎn)單購(gòu)物車，配有截圖，適合初學(xué)者2014-05-05
第一次接觸神奇的Bootstrap導(dǎo)航條，Bootstrap讓W(xué)eb開發(fā)更迅速、更簡(jiǎn)單，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了詳解ES6語法之可迭代協(xié)議和迭代器協(xié)議,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01