您的位置：首页 > Web前端 > JavaScript

JavaScript——简单实现轮播图效果

2020-07-13 05:54 134 查看

分析：可以通过获取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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航