javascript - 幻灯片功能，堆叠div

Question

我一直在尝试使用我从这个网站上找到的这个淡入淡出的幻灯片代码。http://blog.crondesign.com/2012/01/free-javascript-for-rotating-website.html

我的主要问题是我的 div 不会相互堆叠，我研究了不同的方法，例如 z-indexing 和 position:absolute，但它们似乎都不起作用。有人可以看看我的代码，看看有什么问题吗!

HTML:

         <div id="slideshow_container">

                    <div id="banner2" class="banner"></div>

                    <div id="banner3" class="banner"></div>

                    <div id="banner4" class="banner"></div>

                    <div id="banner5" class="banner"></div>

                    <div id="banner1" class="banner"></div>

          </div>            

CSS

    #slideshow_container

    {
        height:486px;
        width: 806px;
        margin-top: 0%;
        margin:auto;
        background-color:green;
        display:block;
    }

    .banner
    {
        z-index:1;
        height:486px;
        width:806px;
        top:0px;
        background:#FFF;
        border:solid 1px #CCC
        position: absolute;
    }


    #banner1
    {
        background:green;
        z-index: 5;
    }

    #banner2
    {
        background: blue;
        z-index:6;
    }

    #banner3
    {
        background:#F90;
    }

    #banner4
    {
        background:#FFC;
    }
    #banner5
    {
        background:#99CCFF;
    }
    #slideshow_container
    {
        height:486px;
        width: 806px;
        margin-top: 0%;
        margin:auto;
        background-color:green;
        display:block;
    }

    .banner
    {
        z-index:1;
        height:486px;
        width:806px;
        top:0px;
        background:#FFF;
        border:solid 1px #CCC
        position: absolute;
    }


    #banner1
    {
        background:green;
        z-index: 5;
    }

    #banner2
    {
        background: blue;
        z-index:6;
    }

    #banner3
    {
        background:#F90;
    }

    #banner4
    {
        background:#FFC;
    }
#banner5
{
    background:#99CCFF;
}

Javascript

var imageCount = 5;  //how many images in total?
var changeSpeed = 3;  //how many seconds between fades?
var fadeSpeed = 0.5; //how many seconds should the fade take?
var fps = 25;  //animation frames per second

//BANNER FUNCTIONS:
var topImgID
var changeInterval

function $(id)
{ 
    return(document.getElementById(id));
}

function changeOpac(obj, opacity) 
{
    obj = obj.style; 
    obj.opacity = (opacity / 100);
    obj.MozOpacity = (opacity / 100);
    obj.KhtmlOpacity = (opacity / 100);
    obj.filter = "alpha(opacity=" + opacity + ")";
}

function changeImage()
{
    var nextImgID = ( topImgID+1 <= imageCount ? topImgID+1 : 1 ); //get id number of next image in list
    var nextImg = $('banner'+nextImgID);
    var lastImg = $('banner'+topImgID);
    var opac = 0;
    changeOpac( nextImg, opac) //make next image invisible, then bring it to the top:
    lastImg.style.zIndex = 2;
    nextImg.style.zIndex = 3;

    var fadeInterval = setInterval(function()
    {
        if(opac < 100)
        {
            opac += Math.ceil(100/(fadeSpeed*fps));
            changeOpac(nextImg, opac);
        }
        else
        {
            lastImg.style.zIndex = 1;
            clearInterval(fadeInterval);
        }
    }, 1000/fps);

    topImgID = nextImgID;
}

function startBanner(firstImageID)
{
    topImgID = (firstImageID==undefined ? 1+Math.floor(Math.random()*(imageCount)) : firstImageID);
    $('banner'+topImgID).style.zIndex = 2;
    changeInterval = setInterval(changeImage, changeSpeed*1000);
}

Answer 1

你忘了关闭你的border 样式，所以position:absolute 没有被读取:

.banner
{
    z-index:1;
    height:486px;
    width:806px;
    top:0px;
    background:#FFF;
    border:solid 1px #CCC <----------- missing ';'
    position: absolute;
}