随机褪色的图像答案

【问题标题】：fading image at random随机褪色的图像
【发布时间】：2013-12-19 09:04:20
【问题描述】：

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

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

有人可以帮我解决这个问题吗？

【问题讨论】：

到目前为止你试过了吗？
另外，你使用 jQuery 吗？因为它会使过程更简单。
@ChenAsraf meta.stackexchange.com/a/19492 很多。这个问题在原生 JS 或使用任何库时都很简单。
只会节省您实现淡入淡出的需要，这可能需要一些工作才能顺利工作。为什么要重新发明轮子？除非您使用 CSS3 过渡来执行此操作，否则会限制浏览器支持。

标签： javascript image random fading

【解决方案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"/>

【讨论】：

感谢您为我提出第一个问题。（淡入淡出）但我没有的是随机选择器，你帮我解决这个问题？
这个脚本有一个随机化器在 ;) 中编写。 var src = ['imgs/derp.jpg', 'imgs/derp2.png']; element.src = src[Math.floor((Math.random()*2))];
只需将更多图像添加到数组中：src = ['imgs/derp.jpg', 'imgs/derp2.png'];这些将是随机的