如何使用DOM正確地將幻燈片控制器插入到div中

我試圖通過DOM在我的幻燈片div的兩端插入左右控制器，使它們位於幻燈片div的相對兩端如何使用DOM正確地將幻燈片控制器插入到div中

到目前爲止，我只得到它們要麼顯示在瀏覽器窗口的頂部角落（使用頂部：0;左：0和頂部：0;右：0爲右和左控制器id的樣式格式化）或左控制器顯示它應該在哪裏，但右控制器直接顯示在左控制器的下方，而不是幻燈片div的對面（我通過將左右控制器樣式更改爲浮動到位） f我剛剛提到的格式化）

我覺得它可能與樣式有關，但我可能是可怕的錯誤。任何人有任何想法？

HTML：

<div id="pageContainer"> 

<!-- Slideshow HTML --> 
    <div id="slideShow" style="border-style: solid; border-color: red; border-width: 1px;"> 
    <div id="slidesContainer" style="border-style: solid; border-color: yellow; border-width: 1px;"> 

     <div class="slide"> 

     <h2>Web Development With PHP</h2> 
     <p><a href="#"><img src="newphp.JPG" alt="Screen capture of PHP built website" width="215" height="145" /></a></p> 

     </div> 

     <div class="slide"> 

     <h2>Database Design with MySQL Workbench</h2> 
     <p><a href="file:///C:/Users/Owner/Documents/IRWireframe/experience.html#test"><img src="Patient_Database_Snapshot.JPG" width="215" height="145" alt="MySQL Workbench Database Design Snapshot" /></a></p> 

     </div> 

     <div class="slide"> 

     <h2>Web Design With CSS and HTML</h2> 
     <p><a href="#"><img src="webdesign.JPG" width="215" height="145" alt="Screen capture of Brian Houlhan's CSS webpage" /></a></p> 

     </div> 
    </div> 

    </div> 
    <!-- Slideshow HTML --> 

    </div>

CSS：

/* 
* Slideshow style rules. 
*/ 
#slideShow { 
    margin:0 auto; 
    width:640px; 
    height:263px; 
    background:transparent url(bg_slideshow.jpg) no-repeat 0 0; 
    position:relative; 
} 
#slideShow #slidesContainer { 
    margin:0 auto; 
    width:560px; 
    height:263px; 
    overflow:auto; /* allow scrollbar */ 
    position:relative; 
} 
#slideShow #slidesContainer .slide { 
    margin:0 auto; 
    width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */ 
    height:263px; 
} 

/** 
* Slideshow controls style rules. 
*/ 
.control { 
    display: block; 
    width: 39px; 
    height:263px; 
    text-indent:-10000px; 
    position: absolute; 
    cursor: pointer; 
} 
#leftControl { 
    float: left; 
    /* 
    top: 0; 
    left: 0; 
    */ 
    background:transparent url(control_left.jpg) no-repeat 0 0; 
} 
#rightControl { 
float: right; 
/* 
top: 0; 
right: 0; 

*/ 
    background:transparent url(control_right.jpg) no-repeat 0 0; 
}

的Javascript（運行HTML文檔中）：

// Insert controls in the DOM 
    $('#slideShow') 
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>') 
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

來源

2013-07-19 Joanne DeBiasa

這應該只是罰款：

#slideshow{ 
position:relative; 
} 
#leftControl{ 
float:none; 
top:0; 
left:0; 
} 
#rightControl{ 
float:none; 
top:0; 
left:0; 
}

當然你不需要添加浮動都不

，你可能只是簡單地刪除浮動：左和float：正確的，是目前這些元素。

來源

2013-07-19 13:01:02

謝謝！當我第一次嘗試它時沒有工作，但是在我擺脫了測試邊界後，它看起來很完美 –

當控制被定位成絕對定位 -

.control { 
    display: block; 
    width: 39px; 
    height:263px; 
    text-indent:-10000px; 
    position: absolute; 
    cursor: pointer; 
} 
#leftControl { 
    top: 0; 
    left: 0; 
    background:#ff0000; 
} 
#rightControl { 
top: 0; 
right: 0; 
    background:#ffcc00; 
}

我沒有看到如何顯示錯誤。如果你看這裏http://jsfiddle.net/CERFY/它看起來是正確的。有沒有其他的標記可能會影響到這一點，也許你有一個活生生的例子來展示？

來源

2013-07-19 04:42:33

這裏是我的測試網站，顯示它如何搞亂：http：/ 2011.ispace.ci.fsu.edu/~bch09c/TestSite/index.html –

如何使用DOM正確地將幻燈片控制器插入到div中

回答

相關問題