wie man das Bild in jQuery zirkulär zeigt?

Question

Ich implementiert Bild-Slider mit jquery. Aber es ist nicht zirkulär. Es bedeutet, dass es derzeit 1->2->3..->8 dann zurück zu zero Marge. es sieht nicht gut aus. wie ich nach dem letzten Element 1->2->3..->8->1->2-3 anfügen werde, damit es gut aussieht.

hier ist mein Code

$(function(){ 
    var counter =0 
    var len =$('.imageSlilder ul li').length; 
    setInterval(function(){ 
     $('.imageSlilder ul').css('margin-left',-325*counter+'px') 

    counter++; 
     if(counter>=len){ 
        counter =0 
       } 
    },2000) 
}) 

https://jsbin.com/zizegixoha/edit?html,css,js,output

Answer 1

das erste Bild hinzufügen an der letzten Position auch dann einfach die Position ohne Übergang auf 0 zurückgesetzt:

if(counter>=len+1){ 
     $('.imageSlilder ul').css({ 
     'margin-left':'0px', 
     transition:'margin-left 0s' 
    }) 
    counter=1 
    } 

den Übergang zu reinit , kann es zurück setzen:

$('.imageSlilder ul').css({ 
    'margin-left':-325*counter+'px', 
    transition:'margin-left 1s' 
    }) 

aktuellen Ansatz, braucht einige Optimierungen glatt laufen:

https://jsbin.com/qaruwadiwi/1/edit?js

Answer 2

Ich denke, dass ein besserer Ansatz als die Margen unter Verwendung ist eine Kopie des ersten Elements an die letzte Position zu machen und es dann von seinem früheren Platz entfernen , so haben Sie Ihren unendlichen Schieberegler.

Für eine sanftere Animation können Sie die Breite des Bildes vor dem Entfernen reduzieren.

$(function(){ 
    setInterval(function(){ 
     var first = $('.imageSlilder ul').children().first(); // item to move 
     $('.imageSlilder ul').append(first.clone()); // CLONE it at the end 
     first.animate({width: 0}, 500, function() { // reduce width to 0 
      first.remove(); // on completion of the animation, remove item 
     }); 
    },2000) 
}); 

Hier haben Sie es arbeiten: https://jsbin.com/malehufifu/1/edit?html,css,js,output