最简单的JavaScript图片轮播代码(两种方法)

下面是“最简单的JavaScript图片轮播代码(两种方法)”的完整攻略。

什么是JavaScript图片轮播？

JavaScript图片轮播是网站开发中常见的一种功能，可以展示一组图片，通过自动或手动切换图片来实现轮播效果，增强网站的视觉效果和用户体验。

JavaScript图片轮播的实现方法

在本文中，我们将介绍两种方法来实现最简单的JavaScript图片轮播：

1. 使用setTimeout()方法
2. 使用setInterval()方法

下面我们将详细解释这两种方法的实现过程。

方法一：使用setTimeout()方法

这种方法的实现原理是，通过setTimeout()方法设置延迟时间，定时更换图片。首先我们需要提前定义好一组图片地址，代码如下：

var imgArr = ['img/pic1.jpg', 'img/pic2.jpg', 'img/pic3.jpg', 'img/pic4.jpg'];

接下来，我们可以通过以下代码，不断更换图片：

var index = 0;

function changeImg(){
    var img = document.getElementById('slider');
    img.src = imgArr[index];
    index++;
    if(index == imgArr.length){
        index = 0;
    }
    setTimeout(changeImg, 3000);
}

window.onload = changeImg;

上述代码中，我们定义了一个index全局变量，用来记录当前正在展示的图片的下标。changeImg()函数会获取页面中id为slider的图片元素，并将其src属性修改为imgArr中指定下标的图片地址。然后，index自增1，如果index已经等于imgArr.length，即当前已经展示到最后一张图片，那么index会被重置为0，重新开始图片轮播。最后，我们使用setTimeout()方法设置轮播间隔时间为3秒。

方法二：使用setInterval()方法

这种方法的实现原理也是通过设置定时器，不同的是它使用了setInterval()方法，以达到定时更新图片的效果。

var imgArr = ['img/pic1.jpg', 'img/pic2.jpg', 'img/pic3.jpg', 'img/pic4.jpg'];
var index = 0;
var timer = null;

function changeImg(){
    var img = document.getElementById('slider');
    img.src = imgArr[index];
    index++;
    if(index == imgArr.length){
        index = 0;
    }
}

function startTimer(){
    timer = setInterval(changeImg, 3000);
}

function stopTimer(){
    clearInterval(timer);
}

window.onload = startTimer;

与方法一类似，我们同样需要定义一组图片地址，在changeImg()函数中更新图片和下标，使用setInterval()方法定时执行changeImg()函数。同时，我们为了增加用户控制轮播的灵活性，在startTimer()函数中开启定时器，在stopTimer()函数中停止定时器。

示例说明

下面，我们将给出两个示例说明。

示例一：基于方法一的图片轮播

假设我们需要实现一个轮播播放img/pic1.jpg到img/pic4.jpg的图片轮播器，可以使用以下HTML代码：

<div>
    <img id="slider" src="img/pic1.jpg" alt="banner">
</div>

然后将方法一的完整代码嵌入到HTML页面中，即可实现该图片轮播器。

示例二：基于方法二的图片轮播

假设需要实现一个可以手动控制的图片轮播器，可以使用以下HTML代码：

<div>
    <img id="slider" src="img/pic1.jpg" alt="banner">
    <div>
        <button onclick="stopTimer()">停止</button>
        <button onclick="startTimer()">开始</button>       
    </div>
</div>

上述代码中，除了img标签外，还添加了两个按钮，通过调用startTimer()和stopTimer()函数来分别启动和停止轮播。

然后将方法二的完整代码嵌入到HTML页面中，即可实现该图片轮播器，并且可以通过点击按钮来控制轮播的开始和停止。