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

Answer 2

将整个代码放入function并在clearInterval

之后调用

<强>演示：

function init() {
    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);
            init();
        } else {
            img = new Image();
            div.appendChild(img);
            img.src = 'http://tdhdemo.com/frames/frame_' + i + '.jpg';
            img.id = "frames";
        }
    }, 3000);
}
init();

#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;
}

<div id="foo"></div>

http://jsfiddle.net/kishoresahas/o1zj2c1w/2/

Answer 3

您可以复制此内容并重试：

var app = angular.module("myApp", []);

//In another file
app.constant("BigArray", new Uint8Array([0x10, 0x20, 0x30]));
//In another file end

app.controller("myController", ["$scope", "BigArray", function($scope, BigArray){
    $scope.bigArray = BigArray; 
}]);

Answer 4

我只是替换

i++;

与

i < nImg ? i++ : i = 1;

如何从同一个src循环动画和交叉淡化图像？

4 个答案: