0

我正在尝试通过 DOM 在幻灯片 div 的两端插入左右控制器，使它们位于幻灯片 div 的两端

到目前为止，我只让它们显示在浏览器窗口的上角（使用顶部：0；左侧：0和顶部：0；右侧：0用于左右控制器 ID 的样式格式）或左侧控制器显示它应该显示的位置，但右控制器直接显示在左控制器下方，而不是幻灯片 div 的另一侧（我通过将左右控制器样式更改为浮动来代替我刚才提到的先前格式)

我觉得这可能与样式有关，但我可能大错特错。有人有想法么？

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

2 回答 2

0

当控件以绝对定位定位时 -

.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-19T04:42:33.597 回答
0

这应该可以正常工作：

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

当然，您不需要添加 float none，您只需删除当前位于这些元素上的 float:left 和 float:right 即可。

于 2013-07-19T13:01:02.103 回答