Question

我正在尝试布局一些HTML，以便我有标题，然后是图像，然后是链接。我一直试图这样做，但没有运气，目前图像不包括在包装器中的任何原因，并出现在标题和链接之后。任何帮助将不胜感激。

HTML：

<div class="wrapper">
  <h3>heading</h3>
    <div id="cycler">
      <img class="active" src="/images/baker-own-goal.jpg" alt="My image" style="width:600px;height:400px;"/>
      <img src="/images/Oops.jpg" alt="My image" style="width:600px;height:400px;"/>    
    </div>
  <a href="/">Link</a>
</div>

CSS：

#cycler{
  position:relative;
}
#cycler img{
  position:absolute;
  z-index:1;
}
#cycler img.active{
  z-index:3;
}
.wrapper{
  margin-top: 100px;
  margin-right: 260px;
  margin-left: 260px;
  margin-bottom: 100px;
  position: relative;
  letter-spacing: 1px;  
  background: rgb(0, 0, 0); /* fallback color */
  background: rgba(0, 0, 0, 0.7);
  padding: 50px; 
}
.title { 
  text-align: center;
  width: 100%; /* for IE 6 */
  padding-bottom: 10px;
  padding-top: 25px;
}

不确定JS是否会影响它，但无论如何都会包含它：

          function cycleImages(){
              var $active = $('#cycler .active');
              var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
              $next.css('z-index',2);//move the next image up the pile
              $active.fadeOut(1500,function(){//fade out the top image
                  $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
                  $next.css('z-index',3).addClass('active');//make the next image the top one
              });
          }
          $(document).ready(function(){
          // run every 5s
          setInterval('cycleImages()', 5000);
          })

的jsfiddle：

https://jsfiddle.net/492s6ufx/

Answer 1

编辑：我想你想要这个

See this fiddle

setInterval(function()
{
    // Remove .active class from the active li, select next li sibling.
    var next = $('img.active').removeClass('active').next('img');

    // Did we reach the last element? Of so: select first sibling
    if (!next.length) next = next.prevObject.siblings(':first');

    // Add .active class to the li next in line.
    next.addClass('active');
}, 1000);

Answer 2

您的代码几乎是正确的，但您需要向cycler提供图片的尺寸，因为如果您将其内容设置为position:absolute，它就无法适应它＃39;包装它们的大小，因为它认为它们不再包含在其中。因此，您应将其添加到cycler的样式：

#cycler{
  position:relative;
  width:640px;
  height:480px;
}

如何使两个褪色图像居中

2 个答案: