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

最新推荐文章于 2023-03-29 20:38:14 发布

Melonico

最新推荐文章于 2023-03-29 20:38:14 发布

阅读量263

点赞数

分类专栏： JavaScript JavaScript小案例文章标签： javascript bom dom

本文链接：https://blog.csdn.net/qq_45852430/article/details/106950353

版权

JavaScript 同时被 2 个专栏收录

13 篇文章 1 订阅

订阅专栏

JavaScript小案例

7 篇文章 0 订阅

订阅专栏

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

Melonico

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
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张，
复制链接

扫一扫

专栏目录