Question

我要做的是在我添加一个类时保持图像显示，然后在下一个图像显示后删除该类。例如：

显示的图片 - ＆gt;添加类以显示另一个图像 - ＆gt;显示的下一张图片 - ＆gt;删除第一张图像的类。

我认为我的功能主要在那里，只需要稍微调整一下。我尝试过几种不同的方式重新排列代码，但无济于事。有人能看出我哪里错了。我已经删除了setInterval函数，因此有工作代码。

HTML CODE

<div class="thumbnails left">
    <ul>
        <li class="" data-id="0"><img alt="Precision Grinding" src="/assets/img/misc/precision_grinding.jpg"></li>
        <li data-id="1" class=""><img alt="Precision Grinding" src="/assets/img/misc/precision_grinding.jpg"></li>
        <li data-id="2" class=""><img alt="Precision Grinding" src="/assets/img/misc/precision_grinding.jpg"></li>
         <li data-id="3" class="active"><img alt="Precision Grinding" src="/assets/img/misc/precision_grinding.jpg"></li>
     </ul>
 </div>
 <div class="full left">
     <ul style="height: 483px;">
        <li class="" data-id="0"><img alt="Precision Grinding" src="/assets/img/misc/precision_grinding.jpg"></li>
        <li data-id="1" class=""><img alt="Precision Grinding" src="/assets/img/misc/precision_grinding.jpg"></li>
        <li data-id="2" class=""><img alt="Precision Grinding" src="/assets/img/misc/precision_grinding.jpg"></li>
        <li data-id="3" class="active"><img alt="Precision Grinding" src="/assets/img/misc/precision_grinding.jpg"></li>
     </ul>
 </div>

JS CODE

function setActiveImage(){
  $('.thumbnails ul > li').on('click', function(){
    var id = $(this).attr('data-id');
    if(!$(this).hasClass('active')){
        $('.thumbnails .active, .full .active').removeClass('active').stop();
        $('.thumbnails [data-id="'+id+'"], .full [data-id="'+id+'"]').addClass('active');
    }
  });
}

Answer 1

这可能不是您想要的...尝试此代码（demo）

CSS

.full ul > li.removing > img {
  z-index: 8888;
}

.full ul > li.active > img {
  transform: translateX(0%);
  /* delay removed */
  opacity: 1;
}

脚本

$(document).ready(function() {
  $('.thumbnails ul > li').on('click', function() {
    var id = $(this).attr('data-id');
    if (!$(this).hasClass('active')) {
      var $this = $('.thumbnails [data-id="' + id + '"], .full [data-id="' + id + '"]');
      $this
        // check for end of transition event one time
        .one('transitionend', function() {
          $this
            // add "active" class to selected image, just-in-case
            // needed if user is a super-fast clicker, or transitions
            // is set to a bigger number (like 2s)
            .addClass('active')
            // find all sibling LI's of the selected image
            .siblings()
            // remove "active" class to start animation
            // remove "removing" class to reset z-index...
            // this might cause problems as z-index is reset too early
            .removeClass('active removing');
        })
        // start animation of selected image
        .addClass('active')
        // find sibling elements ("li") with an active class
        .siblings('.active')
        // add "removing" class to add a lower z-index to image to hide
        .addClass('removing');
    }
  });
});

有些时候，活动面板在最后一个滑出后滑入视图...我不知道为什么会这样做。

Answer 2

当您知道图像转换/淡入淡出时间时，您可以设置自己的功能以在设定的间隔内淡入下一个图像。

示例：

＆＃13;

var cur_image = 0;
var last_image = 0;
var image_timer;

function fadeToNext() {
    var prev_image = cur_image;
    cur_image = ((cur_image+1) > last_image) ? 0: (cur_image+1);
    var next_image = ((cur_image+1) > last_image) ? 0: (cur_image+1);
  
    // Fade out previous image
    $('#images img').eq(prev_image).removeClass('show');
    
    // After 1s, switch on-top to current image and (in the background) fade-in next image
    setTimeout(function(){
      $('#images img').eq(prev_image).removeClass('on-top');
      $('#images img').eq(cur_image).addClass('on-top');
      $('#images img').eq(next_image).addClass('show');
    }, 1000);
}

$(document).ready(function(){

  last_image = ($('#images img').length - 1);
  
  $('#images img').first().addClass('show on-top').next().addClass('show');
  
  // Start fader (switches every 2s; 1s to fade-out previous and 1 to fade-in next)
  image_timer = setInterval(function(){
    fadeToNext();
  }, 2000);

  
});

＆＃13;

#images img {
  position: absolute;
  z-index: 1;
  opacity: 0;
  transition: opacity 1s ease;
}

#images img.show {
  opacity: 1;
  z-index: 2;
}

#images img.on-top {
  z-index:3;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="images">
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Image%201&w=350&h=150">
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Image%202&w=350&h=150">
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Image%203&w=350&h=150">
</div>

＆＃13;

添加类和延迟删除类JQuery

2 个答案: