原创
JavaScript——简单实现轮播图效果
分析：可以通过获取img元素对象并更改其src属性实现该效果，并使用定时器实现在一段时间后多次切换 1. 使用 img 标签显示图片
<img id="img" src="img/pic1.png" style="width: 100%">
2. 获取元素对象
var img = document.getElementById("img");
3. 更改 img 对象的 src 属性
img.src = "img/pic2.png";
直到，我们只可以满足更换1次图片，并且只能更换1张，如果需要更换多张图片，可以按顺序命名图片，并使用一个计数器来更换不同的图片 我的图片命名为
img
|----pic1.png
|----pic2.png
|----pic3.png
4. 定义一个计数器来帮助更换图片
var picno = 1;
5. 使用字符串拼接更换 3 中的语句
img.src = "img/pic" + picno + ".png";
6. 定义一个方法，并将 2 3 步放进方法体中
function change() {
img = document.getElementById("img");
img.src = "img/pic" + picno + ".png";
}
7. 定义多次定时器，每隔2秒调用一次 change() 方法
setInterval(change,2000);
定时器每次调用 change() 方法时，计数器应自增进入下一张图片，并且 picno 的范围应不大于3 根据以上情况优化 6 中的方法
function change() {
picno++;
if (picno > 3){
picno = 1;
}
var img = document.getElementById("img");
img.src = "img/pic" + picno + ".png";
}
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
</head>
<body>
<img id="img" src="img/pic1.png" style="width: 100%">
<script>
// 定义计数器
var picno = 1;
// 修改图片的src属性
function change() {
picno++; // 每次调用时计数器自增
if (picno > 3){ // 计数器不能大于3
picno = 1;
}
// 获取元素对象
var img = document.getElementById("img");
// 更改 src 属性
img.src = "img/pic" + picno + ".png";
}
setInterval(change,2000);
</script>
</body>
</html>
JavaScript
JavaScript案例
赞
- 作者：Melonico
- 发表时间：2021-03-15 17:35
- 更新时间：2021-03-15 17:35
评论