0

我正在做一个 jQuery 幻灯片并预加载图像，然后将它们添加到另一个数组中。但是，我需要让幻灯片正常工作。我包括小提琴链接：http: //jsfiddle.net/z6qkH/。

所以你可能会问怎么了，幻灯片有效吗？是的，但我需要让它优化，因为现在它几乎因为一些循环问题而崩溃？我在 foreach 循环之后运行 SlideShow() 函数（我想）但这不起作用，因为我在开始时遇到了巨大的滞后。我想从头开始运行这个方法。我需要为此使用for循环吗？

        var img_load = new Array();

     img_load[0] = 'http://img.youtube.com/vi/KobO2FZYMtA/mqdefault.jpg';
     img_load[1] = 'http://img.youtube.com/vi/6FjdbO-CGC4/mqdefault.jpg';
     img_load[2] = 'http://img.youtube.com/vi/h-_cN3_zGuI/mqdefault.jpg';
     img_load[3] = 'http://img.youtube.com/vi/rPf0CTptt8o/mqdefault.jpg';

        /**
         * Foreach loop
         */
             function SlideShow()
             {
                $.each(img_load, function(i, val) { 
                $("#sImage").animate({opacity: 0.0}, 1000);
                /**
                 * Queue function will place the event in queue
                 * Changing image src after the above animate function is completed
                 */
                $("#sImage").queue(function(){
                    $("#sImage").attr("src", val);
                    $("#sImage").dequeue();                
                });

                $("#sImage").attr("src", val).animate({opacity: 1.0}, 1000);   

                /**
                 * Queue function will place the event in queue
                 * Here, queue function is used to hold the changing image for 1 second display
                 */            
                $("#sImage").queue(function(){                 
                    setTimeout(function(){
                        $("#sImage").dequeue();
                    }, 1000);
                });
            });
            SlideShow(); // Not good for some reason. I want to loop from start
        }
4

1 回答 1

1

我不得不说我不会真正采用这种方法进行轮播，但是网上有数百万的教程，所以我不会在这个问题上讨论它。您的问题是您在循环中触发整个函数，然后再次触发该函数等。

对您来说最快的解决方法是检查数组长度并仅在最后触发它。

在这里查看小提琴http://jsfiddle.net/z6qkH/2/

var img_load = new Array();

 img_load[0] = 'http://img.youtube.com/vi/KobO2FZYMtA/mqdefault.jpg';
 img_load[1] = 'http://img.youtube.com/vi/6FjdbO-CGC4/mqdefault.jpg';
 img_load[2] = 'http://img.youtube.com/vi/h-_cN3_zGuI/mqdefault.jpg';
 img_load[3] = 'http://img.youtube.com/vi/rPf0CTptt8o/mqdefault.jpg';

    /**
     * Foreach loop
     */
         function SlideShow()
         {
            var count = 0;
            $.each(img_load, function(i, val) {
            $("#sImage").animate({opacity: 0.0}, 1000);
            /**
             * Queue function will place the event in queue
             * Changing image src after the above animate function is completed
             */
            $("#sImage").queue(function(){
                $("#sImage").attr("src", val);
                $("#sImage").dequeue();                
            });

            $("#sImage").attr("src", val).animate({opacity: 1.0}, 1000);   

            /**
             * Queue function will place the event in queue
             * Here, queue function is used to hold the changing image for 1 second display
             */            
            $("#sImage").queue(function(){                 
                setTimeout(function(){
                    $("#sImage").dequeue();
                    if((img_load.length-1) == count){
                        SlideShow();
                    }
                           count++;
                }, 1000);
            });
        });



    }

$(document).ready(function()
{
    SlideShow();
});​
于 2013-01-03T10:50:27.703 回答