免費(fèi)AI編程助手
我們?cè)跒g覽網(wǎng)頁(yè)的時(shí)候是不是看到很多網(wǎng)頁(yè)中的圖片會(huì)有變化，那么今天我們也來(lái)學(xué)習(xí)下怎么通過(guò)html5來(lái)實(shí)現(xiàn)圖片輪播，下面是圖片輪播圖做法解析！
1.首先我們?cè)陂_發(fā)工具中新建一個(gè) html 文件，代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>輪播圖</title>
</head>
<body>
</body>
</html>
2.在完成之后呢，我們需要在 html 的主體部分添加一個(gè)?div?標(biāo)簽，設(shè)置盒子的寬高以便用來(lái)放入圖片，并且在?div?標(biāo)簽中在加入?img?標(biāo)簽，在將需要的圖片路徑輸入在?img?標(biāo)簽中即可，代碼如下：
<html>
<head>
<meta charset="utf-8">
<title>輪播圖</title>
</head>
<body>
<div>
<img src="img/1.png" />
</div>
</body>
</html>
3.完成之后，我們使用內(nèi)嵌式方法設(shè)置樣式在頭部添加我們需要的css樣式，從而實(shí)現(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.完成上面步驟之后我們可以在預(yù)覽頁(yè)面看到我們的圖片效果，那么接下來(lái)我們?cè)?body?標(biāo)簽中添加? js 事件?onload?，也就是當(dāng)我們?cè)诩虞d該頁(yè)面的時(shí)候，通過(guò)調(diào)用?onload?的值的對(duì)應(yīng)的方法，然后我們?cè)贋?img?添加一個(gè)?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.完成之后呢，我們新建一個(gè) .js 文件添加如下代碼（在我們的開發(fā)中應(yīng)該新建一個(gè)新的 .js 文件從方便開發(fā)），從而完成我們需要的輪播的功能。在代碼中?setInterval(code,time);?的兩個(gè)參數(shù)都是必須的要填寫的，其中code是指代執(zhí)行的方法或者代碼串，?time?是用來(lái)表示圖片直接的時(shí)間間隔（以毫秒計(jì)，1000就是1秒，根據(jù)需要來(lái)調(diào)整）。其中if語(yǔ)句中i的值跟圖片的數(shù)量和命名有關(guān)。代碼如下：
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];
}
通過(guò)以上步驟之后我們就可以得到一個(gè)喜歡的輪播圖了，今天的分享就到這里了，其實(shí)還有很多的方法我們都可以在w3cschool中進(jìn)行方面的學(xué)習(xí)和了解。
