javascript - 使用 jquery 滑动 - 一个元素高于第二个

Question

我有三个 html“幻灯片”(如演示文稿)和切换器，可切换它们。

好的模型情况:

1. 第一张幻灯片可见
2. 切换到第二张幻灯片
3. 第一张幻灯片滑到页面的左边缘
4. 新幻灯片(秒)在第一张幻灯片之后立即从右侧滑到页面(假设幻灯片的边缘接触)

我的代码得到了什么

1. 第一张幻灯片可见
2. 切换到第二张幻灯片
3. 第一张幻灯片滑到页面的左边缘
4. 新幻灯片(秒)从右边开始，但在第一张幻灯片的下方。第一张幻灯片的左下角与第二张幻灯片的右上角接触。

我认为这可能是 CSS 问题，但我不知道如何解决它。我不想忘记代码的重要部分，so here is live preview .我正在谈论的部分在页面末尾。

Answer 1

1) 包装 section div 在另一个容器中，有一类说，.myCarousel .

<div class="myCarousel">

  <section> 
    <!-- Slide 1 Content -->
  </section>
 <section> 
    <!-- Slide 2 Content -->
  </section>
  <section> 
    <!-- Slide 3 Content -->
  </section>

</div> <!-- End of .myCarousel-->

2) 给出.myCarousel以下 CSS:

.myCarousel{
  position:relative;
  min-height:1100px;
}

(最小高度取自您的标记。如果幻灯片的高度不同，请在单击轮播寻呼机时使用 JavaScript 动态设置此高度)。

3) 您的幻灯片包含在 <section> 中标签，所以将以下内容添加到 section CSS 样式:

section{
  position:absolute;
  top:0;
  left:0;
  width:100%;
}  

问题与 CSS 和创建幻灯片的非典型方式有关。看起来你正在使用 jQuery UI 幻灯片效果在幻灯片之间转换(我看到 jQuery animate 效果使用得更多)。这很好，但我们需要向轮播添加一些结构和一些样式以确保幻灯片位于它们应有的位置。

告诉我进展如何。