js实现图片轮换效果代码

下面是JS实现图片轮换效果的完整攻略。

确定轮换效果的基本样式

在实现图片轮换效果之前，我们需要先确定图片轮换效果的基本样式。通常的图片轮换效果包括以下几个特征：

1. 轮换的图片需要以一定的间隔时间进行切换
2. 图片的切换需要具有一定的动效
3. 切换的图片需要在轮换效果的容器中进行展示

因此，我们可以先定义一个基本的样式，包含一个轮换容器和轮换的图片，其中轮换的图片通过绝对定位进行排布。代码如下：

.carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 300px;
}

.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.carousel-item.active {
  opacity: 1;
}

以上代码实现了一个基本的轮换容器及其样式，其中轮换容器具有相对定位和溢出隐藏属性，同时设置了宽度和高度；轮换的图片通过绝对定位进行排布，初始状态的透明度为0；同时设置过渡动效，切换时从透明度0到透明度1。其中，active类用于表示当前展示的图片。

JS实现图片轮换效果代码

在确定了图片轮换效果的样式之后，我们需要使用JS来实现图片轮换效果。具体实现的步骤如下：

1. 获取轮换容器及其中的轮换图片
2. 定义变量来表示当前显示的图片，初始化为0
3. 定义时间间隔，初始化为3000ms，可根据实际需要进行调整
4. 定义轮换函数，函数内部实现了切换图片、更新容器样式和更新显示图片的操作
5. 定义循环函数，用于定时执行轮换函数

下面是具体的代码实现：

// 获取轮换容器及其中的轮换图片
const carousel = document.querySelector('.carousel');
const items = carousel.querySelectorAll('.carousel-item');

// 定义变量来表示当前显示的图片，初始化为0
let current = 0;

// 定义时间间隔，初始化为3000ms，可根据实际需要进行调整
const interval = 3000;

// 定义轮换函数
function rotate() {
  // 隐藏当前显示的图片
  items[current].classList.remove('active');
  // 计算下一张图片的位置
  current = (current + 1) % items.length;
  // 显示下一张图片
  items[current].classList.add('active');
  // 更新轮换容器的样式，使其高度随着图片的高度而动态调节
  carousel.style.height = `${items[current].offsetHeight}px`;
}

// 定义循环函数，用于定时执行轮换函数
setInterval(rotate, interval);

以上代码中，首先获取了轮换容器及其中的轮换图片，然后定义了变量来表示当前显示的图片，初始化为0，同时定义了时间间隔，初始化为3000ms。随后，定义了轮换函数，其中实现了图片的切换、容器样式的更新等操作，最后定义了循环函数，使用setInterval函数来定时执行轮换函数。

示例说明

这里提供两个示例说明。

示例1：轮播图

下面是一个简单的轮播图示例，使用上面的JS实现了图片轮换效果。示例中使用了三张不同的图片，并设置了不同的显示时间。代码如下：

<div class="carousel">
  <img class="carousel-item active" src="http://placehold.it/600x300?text=1" alt="">
  <img class="carousel-item" src="http://placehold.it/600x300?text=2" alt="" style="animation-duration: 2s">
  <img class="carousel-item" src="http://placehold.it/600x300?text=3" alt="" style="animation-duration: 3s">
</div>

const carousel = document.querySelector('.carousel');
const items = carousel.querySelectorAll('.carousel-item');
let current = 0;
const interval = 3000;

function rotate() {
  items[current].classList.remove('active');
  current = (current + 1) % items.length;
  items[current].classList.add('active');
  carousel.style.height = `${items[current].offsetHeight}px`;
}

setInterval(rotate, interval);

你可以在这里查看示例。

示例2：响应式轮播图

下面是一个响应式的轮播图示例，可以根据不同的屏幕尺寸调整轮播图的样式。示例中使用了四张不同的图片，图片大小及显示时间均相同。代码如下：

<div class="carousel">
  <img class="carousel-item active" src="http://placehold.it/600x300?text=1" alt="">
  <img class="carousel-item" src="http://placehold.it/600x300?text=2" alt="">
  <img class="carousel-item" src="http://placehold.it/600x300?text=3" alt="">
  <img class="carousel-item" src="http://placehold.it/600x300?text=4" alt="">
</div>

@media (max-width: 767px) {
  .carousel {
    height: 200px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .carousel {
    height: 300px;
  }
}

@media (min-width: 992px) {
  .carousel {
    height: 400px;
  }
}

const carousel = document.querySelector('.carousel');
const items = carousel.querySelectorAll('.carousel-item');
let current = 0;
const interval = 3000;

function rotate() {
  items[current].classList.remove('active');
  current = (current + 1) % items.length;
  items[current].classList.add('active');
  carousel.style.height = `${items[current].offsetHeight}px`;
}

setInterval(rotate, interval);

你可以在这里查看示例。