0

我正在尝试使用 .prepend() 和 .append() 将我的左右控制器插入幻灯片 div 的侧面，但它们显示在窗口的上角

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

1 回答 1

1

你有 position:absolute; 在您的 .control 类上，因此 #leftControl 和 #rightControl 上的 top:0 left:0 和 top:0 right: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-19T01:11:02.450 回答