0

在图像之间切换时，我做了一个很好的过渡效果，它将不透明度设置为 0（所有 0.5 秒的过渡），然后 0.5 秒后（通过 setTimeout），图像的 src 被更改，它应该淡入。

它在 Chrome 和 IE 上运行良好，但在 Firefox 上，图像淡出然后不是淡出不透明度：1 它只是直接跳到它。

这是我的代码

Javascript：

AddEventListener(window, 'load', function () {
    window.FadeinTime = 500;
    var LargeImageDiv = document.getElementById('LargeImage');
    window.LargeImage = LargeImageDiv.childNodes[1];
    var LargeImageCaption = LargeImageDiv.childNodes[3];
    var SlideText = ['Videography', 'Photography', 'Walkthroughs', 'Fine Art'];
    window.Images = []; //Some image links
    LargeImage.src = '/Resources/Home/' + window.Images[0];
    window.AutoSlide = setInterval(function () {
        var SlideNo = parseInt(LargeImage.getAttribute('data-slide')) + 1;
        var SlideTextNo = parseInt(LargeImage.getAttribute('data-slideText')) + 1;
        if (SlideNo == Images.length) SlideNo = 0;
        if (SlideTextNo == SlideText.length) SlideTextNo = 0;
        LargeImage.setAttribute('data-slide', SlideNo.toString());
        LargeImage.setAttribute('data-slideText', SlideTextNo.toString());
        LargeImageDiv.setAttribute('style', '-khtml-opacity:0;-moz-opacity:0;-ms-filter: alpha(opacity=0);-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter: alpha(opacity=0);opacity:0;');
        setTimeout(function () {
            LargeImage.src = '/Resources/Home/' + Images[SlideNo];
            LargeImageCaption.innerHTML = SlideText[SlideTextNo];
            LargeImageDiv.removeAttribute('style');
        }, window.FadeinTime)
    }, 2500)
});

HTML：

<div id="LargeImage" class='NoSelect' onclick='if(event.target.nodeName == "BUTTON") return; var u = this.childNodes[3].innerHTML; window.location=(u=="Videography"||u=="Walkthroughs"?"/Videos/View/"+u:"/Pictures/View/"+u);'>
    <img src="" data-slide='0' data-slideText='0'/>
    <pre class='Caption'>Videography</pre>
</div>

CSS：

body > div#Content > div#LargeImage  {
    cursor:pointer;
    max-height:490px;
    min-height:300px;
    width:100%;
    overflow:hidden;
    margin:0 auto;
    position:relative;
    -moz-transition:.5s;
        -webkit-transition:.5s;
        -o-transition:.5s;
        transition:.5s;
}

body > div#Content > div#LargeImage > button  {
     position:absolute;
     bottom:5px;
     right:5px;
     ;
}

 body > div#Content > div#LargeImage > img  {
    width:100%;
    margin-top:-10%;
}

body > div#Content > div#LargeImage > pre  {
    height:50px;
    font-size:80px;
}
4

0 回答 0