教你一天玩轉JavaScript(三)——使用JavaScript完成圖片輪播的效果
阿新 • • 發佈：2019-01-28
本文教你如何使用JavaScript完成圖片的輪播，說是圖片的輪播，其實就是圖片的滾動而已，也沒什麼高深莫測的實質性的東西。要實現這個效果，須理解BOM(瀏覽器物件模型)中的Window物件的定時的操作：
- 設定定時的方法
- 清除定時的方法
現在我來寫一個小的Demo來稍微講一下Window物件設定定時的方法。例如有如下一個【Window物件的定時操作.html】頁面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title 在Firefox瀏覽器上執行該頁面，則每隔5秒就會彈出一個對話方塊。再將該頁面改成：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function setTime(){
window.setTimeout("alert('bbb')", 5000);
}
</script>
</head>
<body 在Firefox瀏覽器上執行該頁面，則隔5秒鐘彈出一個對話方塊之後就執行完畢了。下面我為大家提供一個【使用JS實現圖片滾動效果.html】頁面，內容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首頁</title>
<style>
#bodyDiv{
border:1px solid blue;
width:90%;
}
.logoDiv{
border:1px solid blue;
width:33%;
float:left;
height:50px;
}
.clear{
clear:both;
}
#menuDiv{
width:100%;
height:50px;
border:1px solid blue;
background-color: black;
}
#imgDiv{
width:100%;
border:1px solid blue;
}
#menuDiv a{
font-size: 20px;
color: white;
}
.productClass{
width:100%;
border:1px solid blue;
}
.contentClass{
width:100%;
border:1px solid blue;
}
.contentClass font{
font-size: 30px;
color: black;
}
</style>
</head>
<body>
<!-- 整體的DIV -->
<div id="bodyDiv">
<!-- logo的DIV -->
<div>
<div class="logoDiv">
<img src="../img/logo2.png" height="48">
</div>
<div class="logoDiv">
<img src="../img/header.png" height="48">
</div>
<div class="logoDiv">
<a href="">登入</a>
<a href="">註冊</a>
<a href="">購物車</a>
</div>
<div class="clear"></div>
</div>
<!-- Menu的DIV -->
<div id="menuDiv">
<a href="">首頁</a>
<a href="">電腦辦公</a>
<a href="">手機數碼</a>
<a href="">菸酒糖茶</a>
</div>
<!-- 圖片滾動的DIV -->
<div id="imgDiv">
<img id="img1" src="../img/1.jpg" width="100%">
</div>
<!-- 熱門商品的DIV -->
<div class="productClass">
<!-- 文字部分的DIV -->
<div class="contentClass">
<font>熱門商品</font><img src="../img/title2.jpg">
</div>
<!-- 商品部分的DIV -->
<div style="width:100%;border:1px solid blue;">
<div style="width:15%;height: 460px;border:1px solid blue;float:left;">
<img src="../img/big01.jpg" width="100%" height="100%">
</div>
<div style="width:84%;height: 460px;border:1px solid blue;float:left;">
<div>
<div style="border:1px solid blue;width:48%;float:left;height:228px;">
<img src="../img/middle01.jpg" width="100%" height="100%">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
</div>
<div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
</div>
</div>
</div>
</div>
<!-- 廣告的DIV -->
<div style="width:100%;border:1px solid blue;">
<img src="../img/ad.jpg" width="100%" height="80">
</div>
<!-- 最新商品的DIV -->
<div class="productClass">
<!-- 文字部分的DIV -->
<div class="contentClass">
<font>最新商品</font><img src="../img/title2.jpg">
</div>
<!-- 商品部分的DIV -->
<div style="width:100%;border:1px solid blue;">
<div style="width:15%;height: 460px;border:1px solid blue;float:left;">
<img src="../img/big01.jpg" width="100%" height="100%">
</div>
<div style="width:84%;height: 460px;border:1px solid blue;float:left;">
<div>
<div style="border:1px solid blue;width:48%;float:left;height:228px;">
<img src="../img/middle01.jpg" width="100%" height="100%">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
</div>
<div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
</div>
</div>
</div>
</div>
<!-- 頁尾的DIV -->
<div style="width:100%;border:1px solid blue;">
<img src="../img/footer.jpg" width="100%">
</div>
<!-- 友情連結及版權的DIV -->
<div style="width:100%;border:1px solid blue;">
<center>
關於我們 聯絡我們 招賢納士 法律宣告 友情連結 支付方式 配送方式 服務宣告 廣告宣告 <br/>
Copyright © 2005-2016 傳智商城 版權所有
</center>
</div>
</div>
</body>
</html>找到圖片滾動的div：
<div id="imgDiv">
<img id="img1" src="../img/1.jpg" width="100%">
</div>給大家看一眼，接下來主要就是圍繞該div按照如下步驟進行講解：
- 當頁面載入的時候開始計時，並使用onload事件。
- 編寫onload事件觸發的函式。
- 獲得操作圖片的控制權。
- 修改圖片的src的屬性。
如此一來，完成圖片輪播的效果的JavaScript程式碼為：
<script>
// 當視窗被載入時就觸發一個函式
window.onload = function() {
// 設定定時
window.setInterval("changeImg()", 5000);
}
var i = 1;
function changeImg(){
// alert("aaaa");
i++;
// 獲得圖片的控制權
if(i > 3){
i=1;
}
var img1 = document.getElementById("img1");
img1.src="../img/" + i + ".jpg";
}
</script>