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

相关阅读:
效果类似于 distinct 的列值去重/统计 Excel中有unique函数 numbers表格中无
Java - postman访问登录接口失败 (cookie会话不一致)
C# / VB.NET 将Html转为Word
力扣每日一题 6/10
【Nodejs】使用opn自动打开办公文件
如何提高webpack的构建速度？
设计模式使用（成本扣除）
Servlet规范之预览
【Linux篇】磁盘lvm管理(PV,VG,LV,PE)
【数据结构】树和二叉树概念

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