首页 > 其他 > 详细

轮播图

时间:2018-06-03 20:43:52      阅读:214      评论:0      收藏:0      [点我收藏+]
<!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>

轮播图

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!