用於幻燈片放映不正確使用DOM的控制器

我試圖將我的左右控制器插入到我的幻燈片div使用.prepend（）和.append（）的兩側，而是它們顯示在窗口的頂部角落用於幻燈片放映不正確使用DOM的控制器

的Javascript DOM插入（在.html文件運行）：

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

幻燈片HTML：

<body> 
<div id="slice"> 
<div class="container"> 
<div id ="mainContent"> 


    <div id="pageContainer"> 

<!-- Slideshow HTML --> 
    <div id="slideShow"> 

    <div id="slidesContainer"> 

     <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 CSS webpage" /></a></p> 

     </div> 

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

    </div> 

</div> 
</div> 
</div> 
</body>

CSS：

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

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

來源

2013-07-19 Brian Houlihan

你有位置：絕對;在您的.control類上，頂部：0左：0和頂：0右：#leftControl和#rightControl上的0屬性基於整個屏幕進行定位。

儘量只浮於控制左，右像

#leftControl { 
    float:left; 
    background:transparent url(control_left.jpg) no-repeat 0 0; 
} 
#rightControl { 
float:right; 
background:transparent url(control_right.jpg) no-repeat 0 0; 
}

來源

2013-07-19 01:11:02

我實際上已經試過，之前做的和左側的控制出現的地方是應該，但正確的控制將直接在左側控制下的顯示，而不是在div的另一端。你會在黑暗中知道一個解決方案嗎？ –

您可能還需要漂浮#slideShow #slidesContainer，以便它佔據兩者之間的水平空間。如果你有一個URL，我可以看看它會有所幫助。 –

用於幻燈片放映不正確使用DOM的控制器

回答

相關問題