işe yaramak için basit bir jQuery kaydırıcıyı almada sorun

Kodla ilgili olarak, slayt sınıfım filtreyle ilk önce sola ve gösterime animasyon yapıp ardından karusel iç sınıfının sonuna eklenmelidir. bir şekilde .. çalışmıyor. lütfen yardım et. Şimdiden teşekkürlerişe yaramak için basit bir jQuery kaydırıcıyı almada sorun

html

<!DOCTYPE html> 
<html> 
<head> 
    <title>slider</title> 
    <link rel="stylesheet" type="text/css" href="assets/css/slider.css"> 
</head> 
<body> 
    <div class="carousel"> 
     <div class="carousel_inner"> 
      <figure class="slides"> 
       <img src="assets/images/post4.jpg"> 
      </figure> 
      <figure class="slides"> 
       <img src="assets/images/post4-2.jpg"> 
      </figure> 
      <figure class="slides"> 
       <img src="assets/images/post4-3.jpg"> 
      </figure> 
     </div> 
    </div> 
<script type="text/javascript" src="assets/js/jquery.js"></script> 
<script type="text/javascript" src="assets/js/slider.js"></script> 
</body> 
</html>

JQuery: .end() zincirleme önceki seçicinin son seçici ve getiri düşecek çünkü

$(document).ready(function(){ 
    setInterval(function(){ 
     $(".slides:first").animate({"margin-left":"-290px"}).fadeOut().end().appendTo(".carousel_inner"); 
    },2000); 
});

kaynak

2016-04-14 Vishnuprasad Venugopal

kaydırıcı için css nelerdir? – RRK

Öyle gibi animasyon için geri arama bitirmek için appendTo kodu taşımak olacaktır:

$(document).ready(function(){ 
    setInterval(function(){ 
     var firstSlide = $(".slides:first")[0]; 
     $(firstSlide).animate({"margin-left":"-290px", "opacity": 0.5}, 
          1600, //length of the slide/fadeout animation 
          function() { 
           //animation is complete, so move the slide to the end and fade it back it in, also reset the margin back to 0 
           $(firstSlide).appendTo('.carousel_inner').css("margin-left", 0).fadeTo(1000, 1); 
           } 
     ); 
    },3000); 
});

Codepen: http://codepen.io/nobrien/pen/redYPQ

kaynak

2016-04-14 06:11:23 NOBrien

Kişisel slayt ekleme değil. Yani $('.slides:first').end(), mevcut öğeyle sonuçlanmayacaktır.

kaynak

2016-04-14 05:31:21 Justinas

Bu yüzden seçiciyi doğrudan kullanmadan sonuna eklemeliyim? pls sürgülü –

setInterval(function(){ 
    var $first = $(".slides:first"); 
    $first.animate({"margin-left":"-290px"}, function() { 
     var $img = $("<img />").attr("src", $first.find("img").attr("src")).on("load", function() { 
      var fig = $("<figure />").addClass("slides"); 
      fig.append($(this)); 

      $first.parent().append(fig); 
      $first.remove(); 
     }); 
    }); 
}, 2000);

keman: end() tekrar seçmenize gerek daha sonra ana öğeye geçtiği için artık kullanmadığınız gerekir https://jsfiddle.net/36nzoxvk/1/

kaynak

2016-04-14 05:43:53

yardım ancak eki doğru değil. –

onun slaytları sola, sonra arkaya eklemek ve sürekli bir döngü içinde yapmak gerekir .. senin kod –

döngü değil, öyle değil. Eğer .carousel div'u incelerseniz, elementlerin döngü içinde olduğunu görürsünüz. Görmemenizin nedeni, resmin bulunamamasıdır. Ama görüntüler orada olsaydı, döngü olurdu. –

tek şey, yerine .end() ait .end().first() olduğunu.

$(document).ready(function() { 
 
    setInterval(function() { 
 
    $(".slides:first").animate({ 
 
     "margin-left": "-290px" 
 
    }) 
 
     .fadeOut().end().first().removeAttr('style') 
 
     .appendTo(".carousel_inner"); 
 
    }, 2000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="carousel"> 
 
    <div class="carousel_inner"> 
 
    <figure class="slides"> 
 
     <img src="http://dummyimage.com/300x200/F00/fff"> 
 
    </figure> 
 
    <figure class="slides"> 
 
     <img src="http://dummyimage.com/300x200/0F0/fff"> 
 
    </figure> 
 
    <figure class="slides"> 
 
     <img src="http://dummyimage.com/300x200/00F/fff"> 
 
    </figure> 
 
    </div> 
 
</div>

kaynak

2016-04-14 06:01:24 RRK

bu işe yarıyor .. ama ne de mükemmel .. Ben hala karusellerde olduğu gibi sol yan etkisi kaymasını almıyorum (şikayetçi değilim). eğer bunu da düzeltebilirseniz .. bu harika bir yardımcı olur –

@VishnuprasadVenugopal Cevabı güncelledi. – RRK

işe yaramak için basit bir jQuery kaydırıcıyı almada sorun

cevap

İlgili konular