javascript - 如何使用 DOM 正确地将幻灯片 Controller 插入到 div 中

Question

我试图通过 DOM 在我的幻灯片 div 的两端插入左右 Controller ，使它们位于幻灯片 div 的两端

到目前为止，我只让它们显示在浏览器窗口的上 Angular (使用 top: 0; left: 0 和 top: 0; right: 0 用于左右 Controller id 的样式格式)或左 Controller 显示在它应该显示的位置，但右 Controller 显示在左 Controller 的正下方，而不是在幻灯片 div 的另一侧(我通过更改左右 Controller 样式 float 以代替我刚才提到的以前的格式)

我觉得这可能与样式有关，但我可能大错特错。有人有主意吗？

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>');

Answer 1

这应该可以正常工作:

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

当然你不需要添加 float none，你可以简单地删除当前在这些元素上的 float:left 和 float:right。