js实现图片切换（动画版）

我们来详细讲解一下 JS 实现图片切换（动画版）的完整攻略。

1. 需求分析和思路设计

首先我们需要搞清楚我们要实现一个什么样的功能。简单来说，我们需要实现一个图片轮播器的功能。具体来说，我们需要实现以下需求：

在一个容器内，切换显示不同的图片；
实现图片的渐变过渡效果；
实现循环展示，即最后一张图片之后回到第一张图片。

了解了这些需求后，我们可以开始考虑如何实现这个功能。我们需要做的事情主要分为以下几步：

加载图片资源
切换显示
图片切换的过渡动画
实现循环展示

2. 代码实现

2.1 加载图片资源

我们需要通过 JS 加载图片资源，并将其添加到 HTML 页面中。

var imgs = [
  'http://example.com/img1.jpg',
  'http://example.com/img2.jpg',
  'http://example.com/img3.jpg'
];

for (var i = 0; i < imgs.length; i++) {
  var img = new Image();
  img.src = imgs[i];
  // 将图片添加到页面中
  document.getElementById('gallery').appendChild(img);
}

在以上代码中，我们使用了 Image 对象来加载图片资源，然后将其添加到 ID 为 gallery 的 DOM 元素中。

2.2 切换显示

我们需要实现一个函数，用于切换当前显示的图片。

var currentImgIndex = 0; // 当前显示的图片索引
var imgs = document.getElementById('gallery').getElementsByTagName('img');

function showNextImg() {
  // 隐藏当前显示的图片
  imgs[currentImgIndex].style.display = 'none';
  // 切换到下一张图片
  currentImgIndex = (currentImgIndex + 1) % imgs.length;
  // 显示新的图片
  imgs[currentImgIndex].style.display = 'block';
}

2.3 图片切换的过渡动画

我们可以使用 CSS 的渐变效果来实现图片切换的过渡动画。具体来说，我们可以为图片元素添加一个 CSS 类，让其在过渡效果结束后再将其移除。

.img-transition {
  transition: opacity 1s;
  opacity: 0;
}

.img-transition.show {
  opacity: 1;
}

var currentImgIndex = 0; // 当前显示的图片索引
var imgs = document.getElementById('gallery').getElementsByTagName('img');

function showNextImg() {
  // 隐藏当前显示的图片，并添加过渡效果的类
  imgs[currentImgIndex].classList.add('img-transition');
  // 切换到下一张图片
  currentImgIndex = (currentImgIndex + 1) % imgs.length;
  // 显示新的图片，并添加过渡效果的类
  imgs[currentImgIndex].classList.add('img-transition', 'show');
  // 在过渡效果结束后，移除过渡效果的类
  setTimeout(function() {
    imgs[currentImgIndex].classList.remove('img-transition');
    imgs[currentImgIndex].classList.remove('show');
  }, 1000);
}

以上代码中，我们使用了 CSS 中的过渡效果，并在 showNextImg 函数中添加了类的操作，以及以定时器的方式来延迟将类移除的操作，达到了我们想要的渐变效果。

2.4 实现循环展示

为了实现循环展示，我们需要通过判断当前显示图片的索引，来决定下一张图片是哪一张。具体来说，我们可以在 index 加一之后，对总图片数量取模，来实现循环展示。

在 showNextImg 函数中，我们已经实现了循环展示的功能。每一次切换下一张图片时，都会将 currentIndex 加一并对 totalImgs 取模，来实现循环展示功能。

3. 示例说明

以下是两个示例，其中一个采用了 CSS3 动画库来实现过渡效果，另一个则是简单地使用了原生过渡效果。

示例一：使用 CSS3 动画库实现过渡效果

<div id="gallery">
  <img src="http://example.com/img1.jpg" class="show">
  <img src="http://example.com/img2.jpg">
  <img src="http://example.com/img3.jpg">
</div>

var currentImgIndex = 0; // 当前显示的图片索引
var imgs = document.getElementById('gallery').getElementsByTagName('img');

function showNextImg() {
  // 隐藏当前显示的图片，并播放过渡动画
  animate(imgs[currentImgIndex], {opacity: 0}, function() {
    imgs[currentImgIndex].classList.remove('show');
  });
  // 切换到下一张图片
  currentImgIndex = (currentImgIndex + 1) % imgs.length;
  // 显示新的图片，并播放过渡动画
  imgs[currentImgIndex].classList.add('show');
  animate(imgs[currentImgIndex], {opacity: 1});
  // 在过渡动画结束后，将类移除
  imgs[currentImgIndex].addEventListener('animationend', function() {
    imgs[currentImgIndex].classList.remove('animated', 'fadeIn');
  });
}

// 在代码中使用 animate 动画库来实现过渡动画

示例二：使用原生实现过渡效果

<div id="gallery">
  <img src="http://example.com/img1.jpg" class="show">
  <img src="http://example.com/img2.jpg">
  <img src="http://example.com/img3.jpg">
</div>

#gallery img {
  transition: opacity 1s;
  opacity: 0;
}

#gallery img.show {
  opacity: 1;
}

var currentImgIndex = 0; // 当前显示的图片索引
var imgs = document.getElementById('gallery').getElementsByTagName('img');

function showNextImg() {
  // 隐藏当前显示的图片，并添加过渡效果的类
  imgs[currentImgIndex].classList.remove('show');
  // 切换到下一张图片
  currentImgIndex = (currentImgIndex + 1) % imgs.length;
  // 显示新的图片，并添加过渡效果的类
  imgs[currentImgIndex].classList.add('show');
}

以上是 JS 实现图片切换（动画版）的完整攻略，包括了需求分析和思路设计、代码实现以及两个示例说明。

本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！