轮播图

<!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" alt="">
</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>

posted on 2018-06-03 19:23  Austin_Wong  阅读(71)  评论(0)  编辑  收藏  举报

导航