Ders ekleme ve Gecikme Sınıfı Kaldırma JQuery

Question

Yapmaya çalıştığım şey, bir sınıf eklerken bir resmi tutmak ve sonraki resim gösterildikten sonra sınıfı kaldırmaktır. Örneğin:

Gösterilen resim -> Başka bir resim göstermek için Class ekle -> Sonraki Resim gösteriliyor -> İlk resmin sınıfını kaldır.

Sanırım çoğunlukla işlevim var, sadece biraz değişiklik gerekiyor. Kodu birkaç farklı şekilde yeniden düzenlemeyi denedim, ama boşuna. Birisi yanlış nereye gittiğimi görebilir. SetInterval işlevini kaldırdım, böylece çalışma kodu var.

HTML KOD

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

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

Bu ... bu kodu denemek istediğini tam olarak olmayabilir (demo)

CSS

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

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

SenaryoAktif panelin son bir slayt gösterildikten sonra görüntüye kaydığı zamanlar vardır. Bunu neden yaptığını bilmiyorum.

Answer 2

görüntü geçiş/solma zamanı bilmek, sonraki resmin üzerine kadar solmaya kendi işlevini kurmak olabilir belirli bir aralık.

Örnek:

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>