Javascript 添加类并延迟删除类JQuery

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

显示图像->添加类以显示另一个图像->显示下一个图像->删除第一个图像的类

我想我的函数大部分都在那里，只是需要一些调整。我尝试过用几种不同的方法重新排列代码，但都没有用。有人能看出我错在哪里吗。我已经删除了setInterval函数，因此有可用的代码

HTML代码

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

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

---

当您知道图像过渡/淡入淡出时间时，您可以设置自己的功能，以便在设定的时间间隔内淡入下一幅图像

例如：

var cur_image=0；
var last_image=0；
var图像定时器；
函数fadeToNext（）{
var prev_image=cur_image；
cur_image=（（cur_image+1）>最后一个图像）？0：（cur_image+1）；
var next_image=（（cur_image+1）>last_image）？0：（cur_image+1）；
//淡出以前的图像
$（'#images img'）.eq（prev#u image）.removeClass（'show'）；
//1s后，打开顶部至当前图像，然后（在背景中）淡入下一图像
setTimeout（函数（）{
$（'#images img'）.eq（prev#u image）.removeClass（'on-top'）；
$（'#images img'）.eq（cur#u image）.addClass（'on-top'）；
$（'#images img'）.eq（next#u image）.addClass（'show'）；
}, 1000);
}
$（文档）.ready（函数（）{
最后一张图片=（$（'#图片img'）。长度-1）；
$（'#images img'）.first（）.addClass（'show on top'）.next（）.addClass（'show'）；
//启动音量控制器（每2秒切换一次；1秒切换前一次淡出，1秒切换下一次淡入）
image_timer=setInterval（函数（）{
fadeToNext（）；
}, 2000);
});
#图像img{
位置：绝对位置；
z指数：1；
不透明度：0；
过渡：不透明度1s；
}
#图像img.show{
不透明度：1；
z指数：2；
}
#图像img.on-top{
z指数：3；
}
这可能不是您想要的。。。请尝试以下代码（）

CSS

剧本

$(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');
    }
  });
});

有时，活动面板在最后一个滑出后滑入视图。。。我不知道它为什么会这样。
我想你想做什么，交叉褪色。现在图像消失，页面背景显示出来。我真的希望在那里一直有一张照片。但我想要一个幻灯片效果。我有向下滑动的效果，但是当我点击一个缩略图时，它会删除一个类，然后在显示背景的情况下将图像滑动到一边。然后将另一个图像滑入。我总是希望有一个图像，直到另一个图像完全滑入页面。这有意义吗？那么你在使用css动画？你能安排一个演示吗？是的，给我几分钟，对不起。这是一个可行的例子。不是完美的样式，但它的工作方式就像我现在在我的网站上。谢谢。这似乎是我一直在寻找的，虽然，我不明白你在这里所做的一切。你介意评论一下代码吗？好的，对不起。。。添加了一堆评论。现在我看了一下，可能不需要“removing”类。
$(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');
    }
  });
});