13

这有点难以解释，但我会试一试。我正在使用这个滑块教程（http://css-tricks.com/slider-with-sliding-backgrounds/）来创建一个步骤表单。

它工作得很好，但我有一个小问题，我有一个上传图片（大背景图片）的部分，我没有调整高度。

由于此上传部分位于第一张幻灯片的顶部，因此当我上传图片时，它会将第二张和第三张幻灯片向下推。无论对第一张幻灯片做了什么，有没有办法让其他幻灯片（2 和 3）保持在顶部？

一个快速图表，以帮助进一步解释我在说什么。

Ps：我遵循与教程中使用的相同语义。例如。id，类等

4

4 回答 4

4

您可以通过使用.data()存储原始.offset()来做到这一点，如下所示：

工作示例 

$('#slide-1').data('offset-top', $('#slide-1').offset().top); //store the initial offset top 

$('#add').click(function () { // click the button to add an image
    $('div.image-holder').html('<img src="http://farm8.staticflickr.com/7382/8732044638_9337082fc6_z.jpg" /> '); 

    $('#slide-1, #slide-2').offset({ // keep slides 1 and 2 in their original positions
        top: $('#slide-1').data('offset-top')
    });
});
于 2013-08-19T16:55:24.293 回答
2

对您的 html 进行了以下更改，使其工作DEMO

  <nav class="slider-nav">
    <a href="#slide-0" class="active">Slide 0</a> 
    <a href="#slide-1">Slide 1</a> 
    <a href="#slide-2">Slide 2</a> 
  </nav>

<div class="slider-wrap">
  <div class="image-holder">
     <img src="http://farm8.staticflickr.com/7382/8732044638_9337082fc6_z.jpg"/> 
  </div>
  <div class="slider" id="slider">
    <div class="holder">
      <div class="slide" id="slide-0">

      </div>
      <div class="slide" id="slide-1"> 
       </div>
        <div class="slide" id="slide-2">

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

</div>
于 2013-08-18T06:54:14.970 回答
0

问题是 div 会自动占据其容器的整个宽度，并且它们是块级元素，因此它们会堆叠。

要完成这项工作，您需要将上传器和第一张幻灯片包装在各自独立的 div 中，以便限制宽度并且它们不会影响其他幻灯片。

<div class="holder">
    <div class="first-slide-wrap">
        <div class="image-holder"></div>
        <div id="#slide-0"></div>
    </div>
    <div id="#slide-1"></div>
    <div id="#slide-2"></div>
</div>

CSS 将被修改为如下所示：

.first-slide-wrap {
    float:left;
    width:300px;
}
.first-slide-wrap .slide {float:none;}

小提琴：http: //jsfiddle.net/PjxzH/

于 2013-08-20T16:09:59.277 回答
0

您应该将<div class="slide" />用作第一张幻灯片中您想要的所有内容的包装器。这样，第一张幻灯片中的文件上传器就不会影响其他两张。

这是一个固定的 JSFiddle！

于 2013-08-19T01:54:22.333 回答