<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
margin: 0 auto;
width: 640px;
height: 360px;
}
img {
width: 640px;
height: 360px;
border: 2px solid #333;
}
</style>
</head>
<body>
<div>
<img src="./image/pic1.jpeg" alt="">
</div>
<script>
// 获取图片元素
var img = document.querySelector('img')
// 设置最小图片索引值
var minIndex = 1
// 设置最大图片索引值
var maxIndex = 3
// 设置当前图片索引值
var index = minIndex
function next() {
// 如果切换到最后一张图片时将图片索引值重置为第一张
if (index === maxIndex) {
index = minIndex
}else {
// 图片索引值正常+1切换
index++
}
// 通过设置图片的src属性实现切换图片，使用模板字符串拼接图片路径
img.setAttribute('src',`./image/pic${index}.jpeg`)
}
// 设置定时器切换图片实现轮播
setInterval(next, 1800)
</script>
</body>
</html>
万岁爷
6 声望0 粉丝
« 上一篇
js全选反选下一篇 »
新版vscode设置
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。