javascript - 如何循环播放来自同一 src 的动画和淡入淡出图像？

Question

我有以下淡入和淡出一些图像的动画。但是在最后一张图片之后动画将停止。首先，我想一遍又一遍地循环这个动画。其次，我认为是一个 CSS 问题，淡出效果不佳，因为淡出时图像之间有停顿，我想知道我是否可以在淡出时重叠图像。

CSS:

#foo {
      position:relative;
      width: 300px;
      height: 250px;
    }

    #foo img {
      left:0;
      -webkit-transition: opacity 3s ease-in-out;
      -moz-transition: opacity 3s ease-in-out;
      -o-transition: opacity 3s ease-in-out;
      transition: opacity 3s ease-in-out;
    }

    @keyframes bannerFadeInOut {
      0% {
        opacity:0;
      }
      50% {
        opacity:1;
      }
      100% {
        opacity:0;
      }
    }

    @-moz-keyframes bannerFadeInOut {
      0% {
        opacity:0;
      }
      50% {
        opacity:1;
      }
      100% {
        opacity:0;
      }
    }

    @-webkit-keyframes bannerFadeInOut {
      0% {
        opacity:0;
      }
      50% {
        opacity:1;
      }
      100% {
        opacity:0;
      }
    }

    #frames {
      position: absolute;
      animation: bannerFadeInOut;
      animation-duration: 3s;
      animation-iteration-count: 99999;
      animation-timing-function: ease-in-out;
    }

JS

var img, i = 1;
var nImg = 4;
div = document.getElementById('foo');
img = new Image();
    div.appendChild(img);
    img.src = 'http://tdhdemo.com/frames/frame_' + i + '.jpg';
    img.id = "frames";

var interval = setInterval(function() {
    i++;

var element = document.getElementById("frames");
element.outerHTML = "";
delete element;

    if(i > nImg) {
        clearInterval(interval);
    } else {
        img = new Image();
        div.appendChild(img);
        img.src = 'http://tdhdemo.com/frames/frame_' + i + '.jpg';
        img.id = "frames";
    }
}, 3000);

演示:http://jsfiddle.net/o1zj2c1w/

Answer 1

我只是添加了一个快速的 if 语句来进行循环，如果超过 nImg，它会将 i 重置回 1:

if(i>nImg){
    i=1;
}

JSfiddle