我正在使用一个自定义的jQuery滑块来显示一些图像并淡出到下一个图像。
下面是Jquery代码:
(function($){
var simpleslider = function () {
// var interval_id = null;
var feature = {
holder: null,
speed: 2000, // 2 seconds.
delay: 6000, // 6 seconds.
index: 1,
total: 0
};
var fadeFrontFeatures = function(){
feature.holder = $('#gallery .simple-slider').hide(); // This gets the DIV with the class slider and hides them initially.
feature.total = feature.holder.size();
interval_id = setInterval(fadeFrontFeatureNext, feature.delay);
fadeFrontFeatureNext();
};
var fadeFrontFeatureNext = function(){
var previous = feature.holder.eq(feature.index-1);
if(feature.index == feature.total){ feature.index = 0; }
var current = feature.holder.eq(feature.index);
if(previous){ previous.fadeOut(feature.speed); }
current.fadeIn(feature.speed, function(){
feature.index++;
});
};
this.init = function(){
fadeFrontFeatures();
// $("#gallery").mouseenter(function(e){ if (interval_id) { clearInterval(interval_id); interval_id = null; }});
// $("#gallery").mouseleave(function(e){ if (!interval_id) { interval_id = setInterval(fadeFrontFeatureNext, feature.delay); }});
};
return this;
}();
$(simpleslider.init);
}(window.jQuery));
下面是它使用的HTML:
<div id="gallery">
<div class="simple-slider">
<img src="img/testimage.jpg" />
</div>
</div>
因此,简单滑块div中的内容基本上都会淡入、延迟和淡出到下面的简单滑块div中。如果这部分很好,然而,一些图像的文件大小相当大,有时它们在滑块淡出之前没有加载。
注意:不是降低文件大小的选项:)
如何才能使滑块在加载之前不淡出到下一个图像。然后,一旦它们都加载了,它就可以循环通过。
我希望这是有意义的。:)
谢谢大家。
发布于 2012-03-23 09:20:37
imagesLoaded() Plugin将完美地帮助您解决问题。
它将允许您在一个调用中加载所有图像,然后使用回调函数加载您的滑块。如果你点击我提供的链接,它将向你展示该插件的完整使用示例。
https://stackoverflow.com/questions/9832854
复制相似问题