JavaScript实现自动切换图片代码

2023年6月11日下午12:44 • JavaScript

下面我来为您详细讲解“JavaScript实现自动切换图片代码”的完整攻略。

一、了解需求

首先我们需要了解实现自动切换图片所需的功能和需求：

显示多张图片，并实现自动切换；
当鼠标悬停在某个图片上时，停止自动切换，并显示当前的图片；
当鼠标离开时，继续自动切换。

二、代码实现

1. HTML部分

<div id="img-box">
  <img src="images/1.jpg" alt="图片1">
  <img src="images/2.jpg" alt="图片2">
  <img src="images/3.jpg" alt="图片3">
</div>

在HTML部分，我们需要将显示的图片放入一个容器中，这里我选用了<div>元素，并给它一个id值。

如果你需要自定义容器的样式，可以在CSS中对其进行修改。

2. CSS部分

#img-box {
  position: relative;
  width: 600px;
  height: 400px;
}

#img-box img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

#img-box img.active {
  opacity: 1;
}

在CSS部分，我们为容器设置了一个position: relative属性，为了让其中的图片设置绝对定位。

然后，对图片设置了一些样式：

position: absolute，使图片脱离文档流，并让它们重叠在一起；
top: 0 和 left: 0，让图片都在容器的左上角；
opacity: 0，使图片最开始不可见；
transition: opacity .5s ease-in-out，在图片的显示和隐藏时添加了渐变效果。

最后，创建了一个.active的类，用于控制当前显示的图片的样式。

3. JavaScript部分

let imgBox = document.getElementById('img-box');
let imgs = imgBox.getElementsByTagName('img');
let len = imgs.length;
let index = 0;

function changeImg() {
  index++;
  if (index === len) {
    index = 0;
  }
  for (let i = 0; i < len; i++) {
    imgs[i].className = '';
  }
  imgs[index].className = 'active';
}

let timer = setInterval(changeImg, 2000);

imgBox.onmouseenter = function() {
  clearInterval(timer);
}

imgBox.onmouseleave = function() {
  timer = setInterval(changeImg, 2000);
}

在JavaScript部分，我们先获取了img-box容器和其中的图片元素，并记录了图片数量和当前显示的图片序号。

然后，编写了changeImg()函数，用于实现图片的切换。

在changeImg()函数中，首先将当前图片的序号加1，如果已经到了最后一张图片，则将序号归零。

然后，使用for循环将所有图片的class属性清空，并将当前显示的图片的class属性设置为active。

接着，定义了一个定时器timer，用于执行changeImg()函数，并在调用setInterval()方法时指定了图片切换的时间间隔为2000毫秒（2秒）。

最后，为img-box容器绑定了mouseenter和mouseleave事件，并在事件处理函数中控制定时器的启停。

当鼠标移入容器时，使用clearInterval()方法清除定时器，停止图片切换。

当鼠标移出容器时，重新启动定时器，继续自动切换图片。

4. 示例说明

示例一

上面的代码中包含了三张图片，如果有更多的图片，该怎么办呢？

我们只需要在HTML中添加更多的<img>元素，并在JavaScript中修改图片数量即可，如下所示:

<div id="img-box">
  <img src="images/1.jpg" alt="图片1">
  <img src="images/2.jpg" alt="图片2">
  <img src="images/3.jpg" alt="图片3">
  <img src="images/4.jpg" alt="图片4">
  <img src="images/5.jpg" alt="图片5">
</div>

let imgBox = document.getElementById('img-box');
let imgs = imgBox.getElementsByTagName('img');
let len = imgs.length;
let index = 0;

// ...

在JavaScript中，我们只需要将图片数量从3改为5即可。

示例二

如果不需要自动切换图片，只需要在鼠标悬停在某个图片上时显示当前的图片，该怎么做呢？

我们可以先将定时器取消掉，然后为每个图片元素绑定mouseenter和mouseleave事件，分别在事件处理函数中显示和隐藏当前的图片。

修改后的JavaScript代码如下：

let imgBox = document.getElementById('img-box');
let imgs = imgBox.getElementsByTagName('img');
let len = imgs.length;
let index = 0;

function showImg(i) {
  imgs[i].style.opacity = 1;
}

function hideImg(i) {
  imgs[i].style.opacity = 0;
}

for (let i = 0; i < len; i++) {
  imgs[i].onmouseenter = function() {
    showImg(i);
  }

  imgs[i].onmouseleave = function() {
    hideImg(i);
  }
}

在上面的代码中，我们定义了showImg()和hideImg()函数，分别用于显示和隐藏图片。

在循环中，我们为每个图片元素绑定了mouseenter和mouseleave事件，并在事件处理函数中分别调用了showImg()和hideImg()函数。