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

相关阅读:
RNN/LSTM (三) 学习torchtext源码
商场公司怎样利用智能机器人快速联结却不干扰底层
QT windows与linux之间sokcet通信中文乱码问题解决方法
用户模块的实现和首页的开发(二)
inner join与left join之间的区别
05 程序流程控制
工具及方法 - 在线流程图描画
Leetcode2-两数相加代码详解
服务器带宽与家用带宽的区别
nginx相关使用

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