Question

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

这是我的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>

Answer 1

我首先要注意的是，特别是当你第一次学习新东西时，最好是提供你所拥有的每一点信息。如果他们能够看到整体情况，那么有经验的人更容易帮助你。

这是从koala_dev的回答中提取的。在弄清楚你的要求是什么后，我把小提琴放在一起：http://jsfiddle.net/rCsHG/

有几点需要注意：

您必须删除那些id属性，如前所述
您需要将整个幻灯片（实际上是2张幻灯片）包装在包装器中。然后，您可以position:relative主要包装，position:absolute幻灯片。
每个幻灯片都应该有单独的类;我知道这对你有用，但这只是一种很好的做法。

因此，您的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,})
})

Answer 2

你应该拥有一个容器内的所有内容，但每个幻灯片使用一个div，你也需要使用类而不是id，因为ids在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;
}

使用jQuery Cycle定位问题

2 个答案: