Question

我正在创建一个幻灯片，它将遍历图片列表，并在每个图片之间淡入淡出。

这是我的计划：

暂停3秒
淡出顶部的图片
切换图像z-index
更改背面的图像，然后再次显示重复

现在它适用于前两个幻灯片，然后接下来的4个不起作用，然后是2个工作，然后是4个等等。

这是我的全部代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Trust Department Slideshow</title>

<script>
    var SlideshowImageNames = new Array(
        "houses.jpg",
        "highschool.jpg",
        "flags.jpg"
    );
    var slideshowCurrentImage = "A";

    var SlideshowImagePreload = new Array
    for (i=0; i<SlideshowImageNames.length; i++) {
        SlideshowImagePreload[i]=new Image();
        SlideshowImagePreload[i].src=SlideshowImageNames[i];
    }

    function slideshowStart() {
        console.log("starting slideshow");
        document.getElementById("trustSlideshowA").style.backgroundImage = "url('"+SlideshowImageNames[0]+"')";
        document.getElementById("trustSlideshowB").style.backgroundImage = "url('"+SlideshowImageNames[1]+"')";
        setTimeout("slideshowLoopBegin()",500);
    }

    function slideshowLoopBegin() {
        console.log("begin loop (");
        if (slideshowCurrentImage == "A") 
            fade("trustSlideshowA");
        else if (slideshowCurrentImage == "B") 
            fade("trustSlideshowB");
    }

    function slideshowLoopEnd() {
        if (slideshowCurrentImage == "A") {
            document.getElementById("trustSlideshowA").style.zIndex = 1;
            document.getElementById("trustSlideshowB").style.zIndex = 2;
            document.getElementById("trustSlideshowA").style.opacity = 1;
            document.getElementById("trustSlideshowA").style.filter = 'alpha(opacity = 100)';
            slideshowCurrentImage = "B";
            console.log("sent A to back");
        }
        else if (slideshowCurrentImage == "B") {
            document.getElementById("trustSlideshowB").style.zIndex = 1;
            document.getElementById("trustSlideshowA").style.zIndex = 2;
            document.getElementById("trustSlideshowB").style.opacity = 1;
            document.getElementById("trustSlideshowA").style.filter = 'alpha(opacity = 100)';
            slideshowCurrentImage = "A";
            console.log("sent B to back");
        }
        console.log(") end of loop");
        setTimeout("slideshowLoopBegin()",500);
    }

    var TimeToFade = 1000.0;

    function fade(eid) {
        console.log("fading out '"+eid+"'");
        var element = document.getElementById(eid);
        if(element == null)
            return;

        if(element.FadeState == null) {
            if(element.style.opacity == null
                || element.style.opacity == ''
                || element.style.opacity == '1') {
                    element.FadeState = 2;
            }
            else {
                element.FadeState = -2;
            }
        }

        if (element.FadeState == 1 || element.FadeState == -1) {
            element.FadeState = element.FadeState == 1 ? -1 : 1;
            element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
        }
        else {
            element.FadeState = element.FadeState == 2 ? -1 : 1;
            element.FadeTimeLeft = TimeToFade;
            setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
        }  
    }

    function animateFade(lastTick, eid) {  
        var curTick = new Date().getTime();
        var elapsedTicks = curTick - lastTick;
        var element = document.getElementById(eid);

        if(element.FadeTimeLeft <= elapsedTicks) {
            element.style.opacity = element.FadeState == 1 ? '1' : '0';
            element.style.filter = 'alpha(opacity = '
                + (element.FadeState == 1 ? '100' : '0') + ')';
            element.FadeState = element.FadeState == 1 ? 2 : -2;

            slideshowLoopEnd();
        return;
        }

        element.FadeTimeLeft -= elapsedTicks;
        var newOpVal = element.FadeTimeLeft/TimeToFade;
        if(element.FadeState == 1)
            newOpVal = 1 - newOpVal;

        element.style.opacity = newOpVal;
        element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';

        setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
    }

    window.onload=slideshowStart;
</script>

</head>
<body>
    <div style="width: 670px; height: 253px; position: relative;">
        <div style="z-index: 3; width: 670px; height: 253px; background: url('mainimg_overlay.png'); position: absolute; top:0; left: 0;"></div>
        <div style="z-index: 2; width: 670px; height: 253px; background: url('lighthouse.jpg'); position: absolute; top:0; left: 0;" id="trustSlideshowA"></div>
        <div style="z-index: 1; width: 670px; height: 253px; background: url('lighthouse.jpg'); position: absolute; top:0; left: 0;" id="trustSlideshowB"></div>
    </div>
</body>
</html>

我无法从这里上传任何内容，所以我希望有人能发现错误。我从零开始完全开始并再次遇到同样的问题。哦，现在我的代码甚至没有更改图片，它只是在前两个之间切换，但它甚至无法做到这一点。

Answer 1

我知道这不是你问过的，但我可以建议使用NIVO Slider吗？我用过，而且很棒！

http://nivo.dev7studios.com/

我的幻灯片应该会褪色但有时会跳跃

1 个答案: