JavaScript学习（四）——轮播图的实现

实现轮播图的步骤：

html页面，上面要能展示一张图片
js要有一个能够改变图片的方法，可以使用getElementById获取对象，修改src属性
定时器去执行改变图片的方法

选择几张图片导入项目

在这里插入图片描述

定义img标签

<img src="img/1.jpg" id="img" width="100%">
1

改变突变属性的方法

var num =1;
function changeImg() {
    num++;
    if(num==4)
        num=1;
    var img = document.getElementById("img");
    img.src = "img/" + num +".jpg";
}
1
2
3
4
5
6
7
8

定时器

setInterval(changeImg,3000);
1

通过该浏览器打开，可以看到网页在轮播图片

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    <img src="img/1.jpg" id="img" width="100%">
    <script>
        var num =1;
        function changeImg() {
            num++;
            if(num==4)
                num=1;
            var img = document.getElementById("img");
            img.src = "img/" + num +".jpg";
        }
        setInterval(changeImg,3000);
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

相关阅读:
Twikoo最新私有化部署教程--迁移腾讯云
云计算考试题
java求两个数的百分比
“零”成本即可搭建OA系统，终于知道低代码平台为什么那么火
Python 全栈安全（二）
JVM-Java字节码技术笔记
嵌入式系统编程实现485串口收发数据
常见数据类型的占用字节数以及类型转换需要注意的事项
云原生周报 | Kubernetes 1.25 重要更新；2022 国际开源节即将开启
广州穗雅口腔黏膜专科教你：如何辨别口腔溃疡的好坏

原文地址：https://blog.csdn.net/qq_41505957/article/details/126131645