javascript - 如何使两个褪色图像居中

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);