轮播图
Posted austin0505
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了轮播图相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 将所有的图片存入进一个标签里面 -->
<div>
<img src="./images/shutter_1.jpg" >
</div>
<script>
// scr=" ",可以选择scr作为属性，来修改后面的地址即可
//将所有的图片存入一个数组里面，通过下标找到图片
let imgArr = [‘shutter_1.jpg‘, ‘shutter_2.jpg‘, ‘shutter_3.jpg‘, ‘shutter_4.jpg‘];
//找到div下的img标签
let img = document.querySelector(‘img‘);
let i = 0;
setInterval(function () {
i++;
if (i == imgArr.length) {
i = 0;
}
img.src = `./images/${imgArr[i]}`;
}, 1000);
</script>
</body>
</html>
以上是关于轮播图的主要内容，如果未能解决你的问题，请参考以下文章