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 に答える