javascript - jquery Slidebar 在 IE 中不工作

标签 javascript jquery html css internet-explorer

谁能向我解释一下,为什么这在 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>

最佳答案

我相信你是在谈论 IE8 - 当提到 IE ...

opacity

在 IE8 中不能正常工作,试试这样的东西

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

最后一部分 'Opacity=50' 等于 opacity: .5 只需相应调整

对于 IE5-IE7 试试这个

filter: alpha(opacity=50);

关于javascript - jquery Slidebar 在 IE 中不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12334309/

相关文章:

javascript - 在 jQuery 中创建一个按钮

javascript - jquery Jcrop如何进行轮选?有可能吗?

javascript - 为什么函数 getVehicleName 打印全局变量 vehicleName 而不是 Vehicle 对象内的变量 vehicleName?

html - 如何使图像在悬停时向前倾斜

javascript - 解释在 Javascript 中使用引号来更改 CSS 中的背景图像

html - 内嵌 block 框不适合它们的容器

javascript - 如何使用正则表达式将字符串 "folder/lower-case-with-dash"转换为 "folderLowerCaseWithDash"(即驼峰格式)?

javascript - 在模态窗口中使用ID?

javascript - 带有 204 响应和回调函数的信标跟踪图像

javascript - Struts2 和 Struts2 JQuery 插件兼容性