我正在制作 Instagram 图像滑块提要,它在 Chrome、Safari、Firefox 和 Opera 中运行良好,但在所有版本的 IE 中都失败了。它甚至没有给我一条错误消息,它什么也不做。
我需要将图像的高度返回给父 div 以获得正确的背景高度。
在 IE 中,第一个图像被加载,然后什么都没有发生,它甚至不返回第一个图像的高度。我四处搜索并认为这可能与 .children() 和 .each() 在 IE 中无法正常工作有关,但我不确定。
那么这是 IE/jQuery 兼容性问题的原因吗?或者是别的什么?有没有其他方法可以做到这一点?(出于安全目的,我删除了大部分 Auth 令牌)
她是结果的杰作:http: //jsfiddle.net/5ACr9/embedded/result/
(function($){
$.fn.MySlider = function(interval) {
var slides;
var cnt;
var amount;
var j;
function run() {
// hiding previous image and showing next
$(slides[j]).fadeOut(1000).removeClass("selected");
j++;
if (j >= amount) j = 0;
$(slides[j]).fadeIn(1000).addClass("selected");
// loop
setTimeout(run, interval);
}
slides = $('#insta-slider').children();
amount = slides.length;
j=0;
setTimeout(run, interval);
};
})(jQuery);
// custom initialization
jQuery(window).load(function() {
$('.smart_gallery').MySlider(5000);
//gets the height of the first image and returns it to parent
$( "#insta-slider" ).each(function() {
var newHeight = 0, $this = $( this );
$.each( $this.children(), function() {
newHeight = $( this ).height();
});
$this.height( newHeight );
});
var tid = setTimeout(resize, 5000);
function resize(){
//returns the height of each image after the first one
$( "#insta-slider" ).each(function() {
var newHeight2 = 0, $this = $( this );
$.each( $this.children(".selected"), function() {
newHeight2 = $( this ).height();
});
$this.height( newHeight2 );
});
tid = setTimeout(resize, 5000);
}
});