幻燈片功能，堆疊的div

Question

我一直在嘗試使用，我曾在這個網站發現這個衰落的幻燈片代碼.. http://blog.crondesign.com/2012/01/free-javascript-for-rotating-website.html

我的主要問題是，我的div不會堆疊在彼此的頂部，我有研究了不同的方式，如z-索引和位置：絕對和他們似乎沒有工作。有人可以看看我的代碼，看看有什麼不工作！

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