有人能告诉我,为什么这不适用于IE? 它在其他浏览器中完美地淡入每个图像,但在IE中执行时,它只显示最后一个图像(图像5)并保持这种状态。 也许想出一个可能的解决方案?我对jquery很新 JS:
var rotationTime = 3000;
var fadeTimer = 500;
var zStart = 25;
var totalBanners;
var currentImage = 1;
$(document).ready(function(){
totalBanners = $('#fade-slider > div').length;
for(i=1;i<=totalBanners;i++){
$('#img-' + i).css('z-index', '' + (zStart-i) + '');
}
$(document).everyTime(rotationTime, 'imagefader', function(){
if(currentImage < totalBanners){
$('#img-' + currentImage).animate({opacity: 0}, fadeTimer);
currentImage += 1;
}
else{
currentImage = 1;
$('#img-' + currentImage).animate({opacity: 1}, fadeTimer, 'linear', function(){
for(i=1;i<=totalBanners;i++){
$('#img-' + i).animate({opacity: 1}, 0);
}
});
}
}, 0);
});
CSS:
@charset "UTF-8";
#fade-slider {
width:570px;
height:207px;
overflow:hidden;
margin:0px;
padding:0px;
position:relative;
}
.position-zero {
position:absolute;
top:0px;
left:0px;
}
HTML:
<div id="fade-slider">
<div id="img-1" class="position-zero"><a href="#"><img src="images/slider/image-1.jpg" alt="Image1" /></a></div>
<div id="img-2" class="position-zero"><a href="#"><img src="images/slider/image-2.jpg" alt="Image2" /></a></div>
<div id="img-3" class="position-zero"><a href="#"><img src="images/slider/image-3.jpg" alt="Image3" /></a></div>
<div id="img-4" class="position-zero"><a href="#"><img src="images/slider/image-4.jpg" alt="Image4" /></a></div>
<div id="img-5" class="position-zero"><a href="#"><img src="images/slider/image-5.jpg" alt="Image5" /></a></div>
</div>
答案 0 :(得分:0)
尝试更改
$('#img-' + i).css('z-index', '' + (zStart-i) + '');
到
$('#img-' + i).css({'z-index':(zStart-i)});
或
$('#img-' + i).css('z-index', (zStart-i));
我不会声称它会起作用。但我认为它可能只是IE解释事物的方式,我认为它可能被解释为一个字符串而不是一个INT值,并且在那里,没有正确地呈现它。但是再次没有说这就是问题的确切问题,只是关于那条线的东西并没有在我的脑海中,并且没有测试它(目前在Mac上并且没有IE)我无法确定。