Question

我正在进行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
        }

Answer 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();
});

从每个jQuery重新启动

1 个答案: