<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="/images/2.jpeg" alt="图片" width="200px" id="tupian">
<!--修改一下图片的大小-->
<script type="text/javascript">
//定义一个数组存放图片路径
var Array = ['images/2.jpeg', 'images/3.jpeg', 'images/5.jpeg', 'images/7.jpeg'];
//定义一个变量作为数组的索引
index = 0;
//获取元素 dom节点操作 (获取标签，即拿到img标签)
var photo = document.getElementById('tupian')
//设置索引自增
// 开启一个定时器
setInterval(function () {
//开启定时器后，首先修改图片路径，图片路径换成数组索引路径
photo.src = Array[index];
index++; //0 ,1 ,2 ,3
//当放映到最后一张图片的时候,下一张图片换到第一张
if (index >= Array.length) { //Array.length 数组长度
index = 0; //第一张图片
}
}, 1300);
</script>
</body>
</html>
|