使用jQuery Cycle定位问题

Question

我使用jquery Cycle插件构建了一个幻灯片，每个图像都跨越页面的宽度（液体布局），并有一个附带的标题。我需要标题放在图像上，因此我在CSS中使用position: absolute。然而，根据我读到的一些博客文章和Stack的回答，Cycle覆盖了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

我首先要注意的是，尤其是当你第一次学习新东西时，最好提供你所掌握的每一点信息。如果那些经验丰富的人能看到全貌，他们会更容易帮助你。

这是从考拉的回答中得出的。弄清楚你的要求后，我编了一个小提琴：http://jsfiddle.net/rCsHG/

需要注意的几件事：

1. 你必须去掉那些id属性，正如前面提到的

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,})
})  

Answer 2

您应该将所有内容都放在一个容器中，但每个幻灯片都使用一个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;
}