1

私は特大のスライダーを使用していますが、私ができないことを実装したいと考えています。

画像のスライド間隔が 3 秒だとします。

a.jpg、b.jpg、c.jpg、d.jpg の 4 つの画像があります。

現在、b.jpg は非常に大きな画像であるため、読み込みに 4 秒かかります。

a.jpg がロードされて静止した後、スライドしてイメージ b.jpg に道を譲ります。

スライダーの間隔が 3 秒で、b.jpg の読み込みに 4 秒かかるため、b.jpg が完全に読み込まれる前にスライダーが変化し、c.jpg が読み込まれるようにスライダーが変化します。

したがって、c.jpg は b.jpg の前にロードされるため、b.jpg は表示されません。

スライダーを次のように動作させたい: 1 つの画像が完全に読み込まれるまで、スライダーは遷移しません。

b.jpg の読み込みに 6 秒かかる場合、スライダーを使用すると読み込みに 6 秒かかります。完全にロードした後、3 秒間 (遷移間隔) そのままになり、その後スライダーが変化します。

これが私のスクリプトです：

$(window).load(function(){
            jQuery(function($){

                $.supersized({

                    // Functionality
                    slide_interval          :   3000,       // Length between transitions
                    transition              :   1,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                    transition_speed        :   1200,       // Speed of transition

                    // Components                           
                    slide_links             :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
                    slides                  :   [           // Slideshow Images
                                                                                                          <?php
                                                                                                             foreach($wed_image as $wi)
                                                                                                             {?>
                                                        {image : '<?php echo base_url().$wi['wed_pic_image'];?>', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
                                                        <?php
                                                                                                             }?>

                                                ]

                });
            });
           });
4

1 に答える 1

0

まず、php コードを Javascript 変数に保存します。 

 <script type="text/javascript">

    var x="<?php echo base_url().$wi['wed_pic_image']; ?>";

// このように画像 src ユーザーの近くに

{image : x, title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},

// 画像の近くに Javascript 変数を使用します。それは私のために働いた

于 2013-05-21T10:32:28.017 に答える