javascript - 随机褪色的图像

Question

我想知道是否有人可以帮助或指出我正确的方向。

我有一个图像网格。我希望做的是抓取页面上的所有图像并将它们放入一个数组中（完成）。然后每 3 秒我想随机选择一个图像，将其淡出并从同一页面淡入另一张图像。

有人可以帮我弄这个吗？

Answer 1

我曾经做过一个很好的脚本，但它确实使用了 jquery：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var curIndex = 0;
var src = ['imgs/derp.jpg', 'imgs/derp2.png'];
var fadeTimeInMilliseconds = 2000;
var waitTimeInMilliseconds = 5000;

$(document).ready(function(){
    switchImageAndWait(true);
});

function switchImageAndWait(fadeOut2){
    if(fadeOut2){
        setTimeout(fadeOut, waitTimeInMilliseconds);
    }else{
        var index = Math.floor((Math.random()*src.length))
        if(curIndex == index){
            index++;
            if(index >= src.length){
                index-=2;
            }
        }
        curIndex = index;
        $("#swekker").attr("src", src[index]);
        fadeIn();
    }
}

function fadeOut(){
    $("#swekker").fadeTo( fadeTimeInMilliseconds, 0 , function() { switchImageAndWait(false); });
}

function fadeIn(){
    $("#swekker").fadeTo( fadeTimeInMilliseconds, 1 , function() { switchImageAndWait(true); });
}
</script>

这是一个 jquery 脚本脚本，不断地淡入、等待并再次淡出。

要使用此脚本，只需将其添加到图像中：

<img width="602" height="400" src="imgs/derp.jpg" id="swekker"/>