Question

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

我的主要问题是我的div不会叠加在一起，我研究了z-indexing和position之类的不同方式：绝对并且它们似乎都不起作用。有人可以看看我的代码，看看哪些不起作用！

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;
}

幻灯片功能，叠加div

1 个答案: