我們在瀏覽網(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.完成之后,我們使用內嵌式方法設置樣式在頭部添加我們需要的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
?,也就是當我們在加載該頁面的時候,通過調用?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ù)需要來調整)。其中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中進行方面的學習和了解。