码迷,mamicode.com
首页 > 其他好文 > 详细

轮播图

时间:2018-06-03 21:33:57      阅读:118      评论:0      收藏:0      [点我收藏+]

标签:idt   head   charset   TE   i++   meta   doctype   images   shu   

<!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>

轮播图

标签:idt   head   charset   TE   i++   meta   doctype   images   shu   

原文地址:https://www.cnblogs.com/austin0505/p/9130207.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!