javascript图片轮转代码

王林

发布时间：2023-05-29 14:27:08

477人浏览过

来源于php中文网

原创

javascript 图片轮转代码

在 Web 开发中，图片轮转是经常会用到的一个功能。比如在产品展示、轮播图等场景中，我们会需要显示多张图片，并且以一定的时间间隔切换图片。在 JavaScript 中，我们可以通过一些简单的代码实现图片轮转的功能。

思路

图片轮转的实现方式可以有很多种方法，本文将介绍一种基于 JavaScript 原生语法实现的方法，具体思路如下：

1.首先，我们需要准备好要轮转的图片列表，可以使用数组来存储图片信息。

立即学习“Java免费学习笔记（深入）”；

2.接着，我们需要定义一个计数器，用来记录当前图片是列表中的第几张图片。

3.然后，我们可以通过调用 JavaScript 的 DOM API，将图片动态添加到页面中。

4.最后，我们需要设置一个定时器，每隔一段时间就更新计数器，并切换显示下一张图片。

实现步骤

首先，我们需要准备好图片列表。这里，我们可以使用一个 JavaScript 数组来存储图片信息，数组中每个元素是一个对象，包含图片的 url 和 alt。

let images = [
    { url: './img/1.jpg', alt: 'pic1' },
    { url: './img/2.jpg', alt: 'pic2' },
    { url: './img/3.jpg', alt: 'pic3' },
    { url: './img/4.jpg', alt: 'pic4' },
    { url: './img/5.jpg', alt: 'pic5' }
];

接下来，我们定义一个计数器变量 currentIdx，用来记录当前正在显示的图片序号。因为数组索引从 0 开始，所以 currentIdx 的初始值应该为 0。

CopyWeb

AI网页设计转换工具，可以将屏幕截图、网站URL转换为代码组件

下载

let currentIdx = 0;

然后，我们可以通过 JavaScript 的 DOM API 来动态创建一个 img 元素，并将其添加到页面中。

let img = document.createElement('img');
img.src = images[currentIdx].url;
img.alt = images[currentIdx].alt;
document.getElementById('imgWrapper').appendChild(img);

需要注意的是，这里将新创建的 img 元素添加到一个 id 为 imgWrapper 的元素中，在页面中我们需要先定义这个元素。

接下来，我们需要设置定时器来每隔一定时间切换显示下一张图片。在 JavaScript 中，我们可以通过 setTimeout 或 setInterval 函数来实现。这里我们选择使用 setInterval。

let intervalId = setInterval(function() {
    currentIdx++;
    if (currentIdx >= images.length) {
        currentIdx = 0;
    }
    img.src = images[currentIdx].url;
    img.alt = images[currentIdx].alt;
}, 3000);

上面的代码中，setInterval 函数的第一个参数是一个匿名函数，该函数用来更新当前图片的序号和图片信息，并将其赋值给 img 元素的 src 和 alt 属性。第二个参数是定时器的时间间隔，单位是毫秒。例如上面的代码中，每隔 3000 毫秒（即 3 秒），就会执行一次匿名函数。

最后，我们需要在页面卸载时清除定时器，否则可能会造成内存泄漏。

window.onunload = function() {
    clearInterval(intervalId);
};

完整代码

将上述代码整合起来，我们得到了一份完整的基于 JavaScript 原生语法的图片轮转代码。

let images = [
    { url: './img/1.jpg', alt: 'pic1' },
    { url: './img/2.jpg', alt: 'pic2' },
    { url: './img/3.jpg', alt: 'pic3' },
    { url: './img/4.jpg', alt: 'pic4' },
    { url: './img/5.jpg', alt: 'pic5' }
];

let currentIdx = 0;

let img = document.createElement('img');
img.src = images[currentIdx].url;
img.alt = images[currentIdx].alt;
document.getElementById('imgWrapper').appendChild(img);

let intervalId = setInterval(function() {
    currentIdx++;
    if (currentIdx >= images.length) {
        currentIdx = 0;
    }
    img.src = images[currentIdx].url;
    img.alt = images[currentIdx].alt;
}, 3000);

window.onunload = function() {
    clearInterval(intervalId);
};

总结

本文中，我们向大家介绍了一种采用 JavaScript 原生语法实现的图片轮转代码。通过本文的学习，您可以了解到如何使用 JavaScript 数组、DOM API 和定时器来实现图片轮转的功能。当然，此代码仅是基础代码，您可以根据实际需求进行修改和优化。