尝试在单个 div 中淡入淡出（）图像数组不起作用

Question

我有一个 id 为 #hero 的 div。 div 的内容将是放置在数组中的图像，该数组需要放置在 id 的 css 中：#hero。我应用了 fadeToggle 效果并尝试使用图像数组以间隔随机淡入和淡出。

我在尝试提出一个完全有效的解决方案时遇到了问题。例如，这个 -

 $(function(){
           var transition_time = 5000;
           var waiting_time = 500;

           var pictures = ['0.jpg', '1.jpg', '2.jpg']; //array of images
           var n = pictures.length;
           var i;
           var res = '';
           var current = Math.floor(Math.random() * n);

           function f(){
               for (i = 0; i < n; i++) {
                   res += $('#hero').css({'background-image': 'url(images/' + pictures[current] + ')'}).fadeToggle(transition_time);
               }
           }
           setInterval(f, transition_time);
       })
   </script>

• 只需淡入和淡出数组中的第一个元素，在计数 3 后淡出，将 div 留空。它还会在每次淡入淡出之间进行淡入淡出切换。

请问，我怎样才能达到预期的效果？非常感谢您的反馈。

Answer 1

您使用此功能的方式存在一些问题。

1. 永远不会重新生成随机数。 （所以如果页面加载后随机数为0，则保持为0）
2. 不需要循环；本质上它只是将相同的代码重写了 3 次
3. 定时功能只会在每隔一次运行中淡化图像。 fadeToggle() 会淡入#hero div，下次运行时会淡出，下次会淡入。

相反，如何检查 div 是否显示。如果不是，请更改图像并显示它。如果是，则将其淡出，更改图像，然后将其淡入。

我使用颜色而不是图像：https://jsfiddle.net/r8ntauk8/42/

$(document).ready(function(){
    var transition_time = 5000;
    var waiting_time = 500;

    var colors = ['#3f51b5','#009688','#ff5722']; //array of colors
    var n = colors.length;

    function f(){
        var current = Math.floor(Math.random() * n); 

        // If #hero is hidden (first time only) change the color, then fadeIn
        if($('#hero').css('display') == 'none') {
            $('#hero').css({
                'background-color': colors[current]
            }).fadeIn(waiting_time);
        }
        // if #hero is not hidden, fadeOut, change color, then fadeIn 
        else {
            $('#hero').fadeOut(waiting_time, function(){
                $('#hero').css({
                    'background-color': colors[current]
                }).fadeIn(waiting_time);
            });
        }
    }

    // run the function, then set the interval
    f();
    setInterval(f, transition_time);

});

注意：您可能希望在#hero div 周围有一个包装器，否则当 hero div 不显示时，下面的内容将向上移动。