jquery - 重新审视 jQuery 推子功能问题

Question

创建/修改此函数，但循环在第二个图像(总共 5 个图像)处停止。需要帮助防止 z-index 重置，因此它将循环浏览我的所有 5 个图像，而不是仅前两个。

jQuery:

function cycleImages(){
  var $active = $('.image img');
  var $next = ($active.next().length > 0) ? $active.next() : $('.image 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).fadeIn().removeClass('image');//reset the z-index and unhide the image
    $next.css('z-index',5).addClass('image');//make the next image the top one
  });
}

$(document).ready(function(){
    $(".about-button, .home-button, .contact-button, .sourcing-button, .consulting-button, .installation-button").on("click", function(){
    if($(this).hasClass("about-button")) {
        $(".about-container").addClass("display-flex");
    } else {
        $(".about-container").removeClass("display-flex");
    }

    if($(this).hasClass("home-button")) {
        $(".homepage-container").show();
    } else {
        $(".homepage-container").hide();
    }

    if($(this).hasClass("contact-button")) {
        $(".contact-container").addClass("display-flex");
    } else {
        $(".contact-container").removeClass("display-flex");
    }

    if($(this).hasClass("sourcing-button")) {
        $(".services-sourcing-container").addClass("display-flex");
    } else {
        $(".services-sourcing-container").removeClass("display-flex");
    }

    if($(this).hasClass("consulting-button")) {
        $(".services-consulting-container").addClass("display-flex");
    } else {
        $(".services-consulting-container").removeClass("display-flex");
    }

    if($(this).hasClass("installation-button")) {
        $(".services-installation-container").addClass("display-flex");
    } else {
        $(".services-installation-container").removeClass("display-flex");
    }
});

// run every 5s
setInterval('cycleImages()', 5000);

});

html:

<div class="fader">
    <div class="image">
        <img class="" src="images/JAJ_photo1.svg" alt="" style="height: 100%; width:auto; object-fit: contain"; z-index="1">
    </div>
    <div class="">  
        <img class="" src="images/JAJ_photo2.svg" alt="" style="height: 100%; width:auto; object-fit: contain"; z-index="2">
    </div>
    <div class="">  
        <img class="" src="images/JAJ_photo3.svg" alt="" style="height: 100%; width:auto; object-fit: contain"; z-index="3">
    </div>
    <div class="">  
        <img class="" src="images/JAJ_photo4.svg" alt="" style="height: 100%; width:auto; object-fit: contain"; z-index="4">
    </div>
    <div class="">  
        <img class="" src="images/JAJ_photo5.svg" alt="" style="height: 100%; width:auto; object-fit: contain"; z-index="5">
    </div>  
</div>

CSS:

.fader {
  border-radius: 1em;
  height: 25vw;
  width: 74vw;
  max-height:100%;
  min-height: 10vw;
  margin: 0 auto;
  border-left: 1.5em solid #aa917d;
  border-right: 1.5em solid #aa917d;
  position: relative;
  overflow: hidden;
}

.fader div.image img {
  display: block;
  width: 100%;
  margin: 0 auto;
  z-index: 1;
  position: absolute;
}

div.image img {
  z-index: 5;
}

Answer 1

我修改了您的代码并进行了一些更改，如下所示。添加了代码中注释的更改。事实上，很少有一些主要的东西是你不需要的。将 image 类添加到所有 parent-div 中，每次您只需要 fadeIn/fadeOut 仅特定 div 。默认情况下，将 active 类添加到第一个 div.image 中。您可以通过此避免所有 z-index 问题。

额外的CSS

<!--Add below CSS just to show `div` which has active class-->

div.image:not(.active){
      display:none;  
}

function cycleImages() {
  var $active = $('.image.active'); //get the active tab
  var $next = $active.next().length > 0 ? $active.next() : $('.image:first'); 
  //check next length if not present just get the first .image div
  //fade out the top image and remove active class from it in callback
  $active.animate({ 
    opacity:'0'
  },400,function(){
    $active.removeClass('active')
    $next.animate({ 
      opacity:'1'
    },400,function(){ 
      $next.addClass('active');
    }) 
  });
}

// run every 5s
setInterval(cycleImages, 5000);

.fader {
  border-radius: 1em;
  height: 25vw;
  width: 74vw;
  max-height: 100%;
  min-height: 10vw;
  margin: 0 auto;
  border-left: 1.5em solid #aa917d;
  border-right: 1.5em solid #aa917d;
  position: relative;
  overflow: hidden;
}
.fader div.image img {
  display: block;
  width: 100%;
  margin: 0 auto;
  z-index: 1;
  position: absolute;
}
div.image img {
  z-index: 5;
}

div.image{
  opacity:0;
  transition:all 1s ease-in;
}

div.image.active{
  opacity:1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fader">
  <div class="image active">
    <img class="" src="https://images.contentful.com/256tjdsmm689/2T0QeKcvR6MSsckuKoYIwS/b57d12107fc5eb635e294ed1c76cbbac/feature-gettyimages.jpg" alt="" style="height: 100%; width:auto; object-fit: contain" ; z-index="1">
  </div>
  <div class="image">
    <img class="" src="http://www.livemint.com/rf/Image-621x414/LiveMint/Period2/2016/04/09/Photos/DNAnocredit-kuAC--621x414@LiveMint.jpg" alt="" style="height: 100%; width:auto; object-fit: contain" ; z-index="2">
  </div>
  <div class="image">
    <img class="" src="http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738CEB00000578-3504412-image-a-4_1458654503277.jpg" alt="" style="height: 100%; width:auto; object-fit: contain" ; z-index="3">
  </div>
  <div class="image">
    <img class="" src="http://static.bigstockphoto.com/images/homepage/2016_bigstock_video.jpg" alt="" style="height: 100%; width:auto; object-fit: contain" ; z-index="4">
  </div>
  <div class="image">
    <img class="" src="http://media.tinmoitruong.vn/public/media/media/picture/03/kh4.jpg" alt="" style="height: 100%; width:auto; object-fit: contain" ; z-index="5">
  </div>
</div>