js通过循环多张图片实现动画效果

下面是 "JS通过循环多张图片实现动画效果" 的完整攻略。

实现思路

通过JavaScript的循环语句（如setInterval、setTimeout等）来交替切换多张图片的显示，从而实现动画效果。具体实现步骤如下：

1. 将需要播放的图片按照顺序依次存储在一个数组中
2. 定义一个计数器 index，用于记录当前需要播放的图片的下标
3. 使用setInterval或者setTimeout来循环执行切换图片的操作。每次切换时，将当前图片隐藏，下一张图片显示，并将计数器 index 加一。当index值大于等于图片数组的长度时，将其重置为0。

示例说明

示例一：利用setInterval实现循环播放

在HTML页面中，可以使用如下代码定义一个img标签和一个按钮，用于控制播放：

<button id="btnPlay">播放</button>
<img id="animationImg" src="img/1.jpg" alt="动画图片">

在JavaScript文件中，可以按照如下代码实现循环播放：

// 图片数组
var imgs = ['img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg'];

// 当前图片下标
var index = 0;

// 获取img元素
var img = document.getElementById('animationImg');

// 获取播放按钮元素
var btnPlay = document.getElementById('btnPlay');

// 定义计时器
var timer;

// 播放函数
function play() {
  // 切换图片
  img.src = imgs[index];
  // 计数器加一
  index++;
  // 如果计数器等于数组长度，重置为0
  if (index === imgs.length) {
    index = 0;
  }
}

// 给播放按钮绑定点击事件
btnPlay.onclick = function() {
  // 如果计时器已存在，说明正在播放，直接返回
  if (timer) {
    return;
  }
  // 启动计时器
  timer = setInterval(play, 1000);
}

// 停止函数
function stop() {
  // 清除计时器
  clearInterval(timer);
  // 将计时器设置为null
  timer = null;
}

// 给页面添加onunload事件，当页面关闭时停止播放
window.onunload = stop;

上述代码中，使用setInterval来循环执行播放函数play，每隔1秒就会切换一次图片。点击播放按钮后，会启动循环播放。点击停止按钮后，会停止循环播放并清除计时器。

示例二：利用setTimeout实现循环播放

在HTML页面中，可以使用如下代码定义一个img标签和一个按钮，用于控制播放：

<button id="btnPlay">播放</button>
<img id="animationImg" src="img/1.jpg" alt="动画图片">

在JavaScript文件中，可以按照如下代码实现循环播放：

// 图片数组
var imgs = ['img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg'];

// 当前图片下标
var index = 0;

// 获取img元素
var img = document.getElementById('animationImg');

// 获取播放按钮元素
var btnPlay = document.getElementById('btnPlay');

// 定义计时器
var timer;

// 播放函数
function play() {
  // 切换图片
  img.src = imgs[index];
  // 计数器加一
  index++;
  // 如果计数器等于数组长度，重置为0
  if (index === imgs.length) {
    index = 0;
  }
  // 继续循环播放
  timer = setTimeout(play, 1000);
}

// 给播放按钮绑定点击事件
btnPlay.onclick = function() {
  // 如果计时器已存在，说明正在播放，直接返回
  if (timer) {
    return;
  }
  // 启动计时器
  timer = setTimeout(play, 1000);
}

// 停止函数
function stop() {
  // 清除计时器
  clearTimeout(timer);
  // 将计时器设置为null
  timer = null;
}

// 给页面添加onunload事件，当页面关闭时停止播放
window.onunload = stop;

上述代码中，使用setTimeout来循环执行播放函数play，每隔1秒就会切换一次图片。点击播放按钮后，会启动循环播放。点击停止按钮后，会停止循环播放并清除计时器。

结语

以上就是通过JS循环多张图片实现动画的完整攻略，希望对你有所帮助。