我正在使用一个超大的滑块,我想实现一些我无法做的事情。
假设我的图像幻灯片间隔为 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
}?>
]
});
});
});