免費AI編程助手
我們在瀏覽網(wǎng)頁的時候是不是看到很多網(wǎng)頁中的圖片會有變化，那么今天我們也來學習下怎么通過html5來實現(xiàn)圖片輪播，下面是圖片輪播圖做法解析！
1.首先我們在開發(fā)工具中新建一個 html 文件，代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>輪播圖</title>
</head>
<body>
</body>
</html>
2.在完成之后呢，我們需要在 html 的主體部分添加一個?div?標簽，設置盒子的寬高以便用來放入圖片，并且在?div?標簽中在加入?img?標簽，在將需要的圖片路徑輸入在?img?標簽中即可，代碼如下：
<html>
<head>
<meta charset="utf-8">
<title>輪播圖</title>
</head>
<body>
<div>
<img src="img/1.png" />
</div>
</body>
</html>
3.完成之后，我們使用內(nèi)嵌式方法設置樣式在頭部添加我們需要的css樣式，從而實現(xiàn)控制效果。代碼如下：
<html>
<head>
<meta charset="utf-8">
<title>輪播圖</title>
<script type="text/javascript" src="js/輪播圖.js"></script>
<style>
img{
width: 600px;
height: 450px;
}
</style>
</head>
<body>
<div >
<img src="img/1.png" />
</div>
</body>
</html>
4.完成上面步驟之后我們可以在預覽頁面看到我們的圖片效果，那么接下來我們在?body?標簽中添加? js 事件?onload?，也就是當我們在加載該頁面的時候，通過調(diào)用?onload?的值的對應的方法，然后我們再為?img?添加一個?id?屬性，這樣可以方便我們下一步的操作！代碼如下：
<html>
<head>
<meta charset="utf-8">
<title>輪播圖</title>
<script type="text/javascript" src="js/輪播圖.js"></script>
<style>
img{width: 600px;height: 450px;}
</style>
</head>
<body onload="init()">
<div >
<img id="myimg" src="img/1.png" />
</div>
</body>
</html>
5.完成之后呢，我們新建一個 .js 文件添加如下代碼（在我們的開發(fā)中應該新建一個新的 .js 文件從方便開發(fā)），從而完成我們需要的輪播的功能。在代碼中?setInterval(code,time);?的兩個參數(shù)都是必須的要填寫的，其中code是指代執(zhí)行的方法或者代碼串，?time?是用來表示圖片直接的時間間隔（以毫秒計，1000就是1秒，根據(jù)需要來調(diào)整）。其中if語句中i的值跟圖片的數(shù)量和命名有關。代碼如下：
function init(){
window.setInterval(changeImg,1000)
}
var pathArr = new Array(
"img/1.png",
"img/2.png"
);
var index = 0;
function changeImg(){
myimg = document.getElementById("myimg");
index ++;
if(index>=pathArr.length){
index = 0;
}
myimg.src = pathArr[index];
}
通過以上步驟之后我們就可以得到一個喜歡的輪播圖了，今天的分享就到這里了，其實還有很多的方法我們都可以在w3cschool中進行方面的學習和了解。
