js—定时器实现动图

大致思路：先将需要的图片名称改为数字，方便后面调度，根据定时器每隔一段时间就更改一次名称

<div id="box">
  <img src="images/1.Png" alt="" id="pic"> 
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

img {
  /* 垂直居中 */
  vertical-align: middle;
}

#box {
  width: 497px;
  height: 207px;
  margin: 20px auto 0;
}

JavaScript

var pic=document.querySelector('#pic');
console.log(pic);
// 每过0.1秒换张图 
// 定义一个变量i，代表图片名称 
var i=1;
function run() {
  i++;
  // 这个临界点会让图片循环显得僵硬
  if(i==20) {
    i=1;
  }
  pic.src="images/"+i+".png";
}
window.setInterval(run, 100);

代码演示：

如果当i累加到20时，让i变为1就会让图片有明显的僵硬感，这时需要让i累加到19后再从19递减到1，方法：

var pic = document.querySelector('#pic');
console.log(pic);
// 每过0.1秒换张图 // 定义一个变量i，代表图片名称 
var i = 1;
var z = 1;

function run() {
  i = i + z;
  console.log(i, z);
  if (i == 19) {
    z = -1;
  }
  if (i == 1) {
    z = 1;
  }
  pic.src = "images/" + i + ".png";
}
window.setInterval(run, 100);

代码演示：