クラスを追加してクラスJQueryを削除する

Question

私がしようとしているのは、クラスを追加している間にイメージを表示したままにして、次のイメージが表示された後にクラスを削除することです。たとえば、次のように示さ

イメージ - >最初の画像のクラスを削除 - 示さ>次の画像 - >別の画像を表示するためにクラスを追加します。

私は微調整のビットを必要とする、私はほとんどそこに私の機能を持っていると思います。私はいくつかの異なる方法でコードを再配置しようとしましたが、役に立たない。誰かが私が間違っている場所を見ることができます。私は働くコードがあるように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> 

JSコード

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

あなたがイメージトランジション/フェード時間を知っている場合は、あなたが次の画像にフェードインするために、独自の機能を設定できます設定された間隔。

例：

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

 
    
 
});

#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; 
 
}

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