Question

我有一个带有id的div - #hero。 div的内容将是放置在数组中的图像，该数组需要放在id：#hero的css中。我应用了一个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留空。它还可以在每次衰落之间没有优雅延迟的情况下执行fadeToggle。

请问，我如何达到预期的效果？我真的很感激一些反馈。

Answer 1

你有这个功能的方式有几个问题。

永远不会重新生成随机数。（因此，如果页面加载且随机数为0，则它将保持为0）
不需要循环;本质上它只是重写相同的代码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周围有一个包装器，否则下面的内容会向上移动而英雄div显示为none。

试图在单个div中fadeToggle（）图像数组不起作用

1 个答案: