0

我已经使用 jquery Cycle 插件构建了一个幻灯片，每个图像都跨越页面的宽度（液体布局）并有一个随附的标题。我需要将标题放在图像上，因此我position: absolute在我的 CSS 中使用。然而，根据我读过的一些博客文章和堆栈答案，循环覆盖 CSS 定位，并且标题被推到图像下方。我!important在我的 CSS 中使用过，但这也不起作用。

这是我的jQuery：

$(document).ready(function(){
    $(".slideshow").cycle({
        fx: 'scrollRight',
        next: '#right-arrow',
        timeout: 0,})
    $(".slideshow").cycle({
        fx: 'scrollLeft',
        next: '#left-arrow',
        timeout: 0,})
    })

和我的 HTML。请注意，我已将标题包含在与图像不同的 DIV 元素中。将它放在同一个 DIV 中会使标题成为节目中的单独幻灯片。

<div class = "slideshow">
    {% for photo in gallery %}
        <img id = "gallery-image" src ="{{ photo.image.url }}"/>
    {% endfor %}    
</div>  

<div class = "slideshow">
    {% for photo in gallery %}
    <div id = "caption-container">{{ photo.caption }}</div> 
    {% endfor %}
</div>

最后是我的 CSS：

#copy-container {
        position: absolute;
        top: 350px;
        width: 7%;
        right: 3%;
        z-index: 10;
        background-color: red;}

以下是使用 Chrome Inspect Elements 显示的内容：

Computed Styles:
    display: block;
    height: 54px;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    width: 101px;

Styles:
    :active :hover
    :focus  :visited
    element.style {
    position: relative;
    width: 101px;
    height: 54px;
    overflow: hidden;
    }

Matched CSS Rules
    user agent stylesheetdiv {
    display: block;
    }
    Inherited from body
    body {
    font: arial;
    }

来自 Chrome 开发工具的 HTML...

<div class="slideshow" style="position: relative; width: 154px; height: 36px; overflow: hidden;">


        <div id="copy-container" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 3; opacity: 1; width: 154px; height: 36px;">
            <div id="client-container">client:American Express</div>

            <div id="caption-container">WOOOHOOOO</div>
        </div>  


        <div id="copy-container" style="position: absolute; top: 0px; left: 154px; display: none; z-index: 2; opacity: 1; width: 101px; height: 36px;">
            <div id="client-container">client:Selfridges</div>

            <div id="caption-container">nbew image</div>
        </div>  

</div>
4

2 回答 2

2

我首先要指出的是，尤其是当你第一次学习新事物时，最好提供你所拥有的每一点信息。如果有更多经验的人可以看到整个画面，他们会更容易帮助您。

这是从 koala_dev 的回答中得出的。在弄清楚你的要求是什么后，我整理了一个小提琴：http: //jsfiddle.net/rCsHG/

有几点需要注意：

  1. id如前所述，您必须摆脱这些属性

  2. 您需要将整个幻灯片（实际上是 2 个幻灯片）包装在一个包装器中。然后，您可以position:relative主包装器和position:absolute幻灯片。

  3. 您应该为每个幻灯片设置单独的课程；我知道它对你有用，但这只是一种很好的做法。

因此，您的 HTML 将如下所示：

<div class="slideshow-wrapper">
  <div class = "slideshow-img">
    {% for photo in gallery %}
      <img class = "gallery-image" src ="{{ photo.image.url }}"/>
    {% endfor %}    
  </div>  

  <div class = "slideshow-caption">
    {% for photo in gallery %}
      <div class = "caption-container">{{ photo.caption }}</div> 
    {% endfor %}
  </div>
</div>

然后CSS：

.slideshow-wrapper {
  position: relative;
}
.slideshow-img, .slideshow-caption {
  position: absolute;
  width: 100%;
}
.slideshow-caption {
  top: 0;
}

最后，JavaScript：

$(document).ready(function(){
var _timeout = 100; // when using the same value in multiple places, consider storing it in a variable for easy modification
$(".slideshow-img").cycle({
    fx: 'scrollRight',
    // add back in your prev/next
    timeout: _timeout,})
$(".slideshow-caption").cycle({
    fx: 'scrollLeft',
    // add back in your prev/next
    timeout: _timeout,})
})
于 2013-08-09T20:15:12.387 回答
1

您应该将所有内容都放在一个容器中，但为每张幻灯片使用一个 div，您还需要使用类而不是 id，因为 id 在 HTML 页面中应该是唯一的

<div class = "slideshow">
    {% for photo in gallery %}
    <div class="slide">
        <img class="gallery-image" src ="{{ photo.image.url }}"/>
        <div class="caption">{{ photo.caption }}</div> 
    </div>
    {% endfor %}    
</div>

使用 CSS 定位您的标题

.slide{
    position: relative;
}

.caption{
    position: absolute;
    top: 350px;
    width: 7%;
    right: 3%;
    background-color: red;
}
于 2013-08-09T19:20:07.670 回答