|
效果演示：轮播图（自动切图）（点击打开）
- imgarray是存储图片名的数组，大家把这个改成自己的图片名称就好
- setInterval函数作用为每三秒执行一次swich函数
- **i %= imgarray.length;**表示从0到数组长度循环，超过数组长度就为0
- querySelector函数获取img元素，可用getElementByID代替
<!DOCTYPE html>
<head>
<title>轮播图</title>
<meta name="viewport" content="width=device-width">
<style>
.box {
width: 900px;
height: 700px;
margin: 100px auto;
background-color: #000;
}
</style>
</head>
<body>
<div class="box">
<img src="" alt="" width="100%" height="100%">
</div>
<script>
window.onload = function () {
var i = 1;
var imgarray = ['0.jpg', '1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg'];
var img = document.querySelector(".box img");
img.src = imgarray[0];
function swich() {
img.src = imgarray[i];
i++;
i %= imgarray.length;
}
setInterval(swich, 3000);
}
</script>
</body>
JavaScript项目实战 轮播图（手动切图）
还有什么疑问大家可以在评论区提出来！！！
|