1

我正在使用一个超大的滑块,我想实现一些我无法做的事情。

假设我的图像幻灯片间隔为 3 秒,

我有四张图片 a.jpg、b.jpg、c.jpg 和 d.jpg。

现在 b.jpg 是一个非常大的图像,因此加载需要 4 秒。

现在在加载并保留 a.jpg 后,它会滑动以让位于图像 b.jpg。

现在,由于滑块间隔是 3 秒,而 b.jpg 需要 4 秒来加载,所以滑块的变化方式是在 b.jpg 完全加载之前,滑块发生变化并且 c.jpg 被加载。

因此无法看到 b.jpg,因为 c.jpg 在 b.jpg 之前加载。

我希望滑块像这样运行:直到并且除非完全加载一个图像,否则滑块不会移动。

假设如果 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 回答