jQuery image carrousel - Comment puis-je répéter les images?

Question

J'ai écrit un diaporama d'images dans jQuery qui accélère/décale en fonction de l'endroit où la souris survole les images. Je souhaite que les images se répètent lorsque le diaporama se termine. Ainsi, l'utilisateur fait défiler le diaporama, il atteint la fin de l'image LI, puis répète sans interruption depuis le début.

Voici le code actuel:

jQuery

$(document).ready(function() 
{ 
    $('#products ul').css('width', ($('#products ul li').length * 185)); 

    var $products = $('#products div'); 
    var posLeft = 0; 

    // Add 5 DIV overlays to use as 'hover buttons' for the slideshow speed 
    for (i = 0; i <= 4; i++) 
    { 
     $('#products').append('<div class="hover-' + i + '" style="background: transparent; width: 100px; height: 167px; position: absolute; left: ' + posLeft + 'px; top: 15px;"></div>'); 
     posLeft += 100; 
    } 

    // Function animate the scrolling DIV in the appropriate direction with the set speed 
    function plz2scroll(direction, scrollSpeed) 
    { 
     var scrollDir = (direction == 'left') ? '-=' : '+='; 
     var scrollOffset = (direction == 'right') ? '-10' : '+' + $products.css('width').substring(0, -2) + 10; // Fix the '+100px10' issue - Seems substring don't support negative offsets 

     $products.animate({scrollLeft: scrollDir + $products.css('width')}, scrollSpeed, 'linear', function() 
     { 
     $products.scrollLeft(scrollOffset); 
     plz2scroll(direction, scrollSpeed); 
     }); 
    } 

    // Create the 'hover buttons' 
    $('div.hover-0').hover(function() { $products.stop(); plz2scroll('right', 2000); }); 
    $('div.hover-1').hover(function() { $products.stop(); plz2scroll('right', 3500); }); 
    $('div.hover-2').hover(function() { $products.stop(); }); 
    $('div.hover-3').hover(function() { $products.stop(); plz2scroll('left', 3500); }); 
    $('div.hover-4').hover(function() { $products.stop(); plz2scroll('left', 2000); }); 
}); 

HTML

<div id="products"> 
    <div> 
     <ul> 
     <li><img src="images/1.jpg" /></li> 
     <li><img src="images/2.jpg" /></li> 
     <li><img src="images/3.jpg" /></li> 
     <li><img src="images/4.jpg" /></li> 
     <li><img src="images/5.jpg" /></li> 
     </ul> 
    </div> 
</div> 

Les travaux de changeurs et la vitesse/direction fonctionne bien avec les boutons DIV overlays. Mon rappel animate() à répéter est lent, buggé et tout simplement mauvais:/

Mon utilisation excessive de .stop() ressemble également à un problème potentiel>. <

Des idées? juste

Answer 1

pensé à quelque chose:.. Vous pouvez essayer de positionner le div intérieur (celui obtenu par $('#products div') avec position: relative; et les li s avec position: absolute En outre, la div intérieure doit avoir overflow: hidden (probablement déjà le cas) Les positions de les éléments de la liste sont maintenant relatifs à la div environnante, ce qui facilite les calculs

Ensuite, au lieu de déplacer le div dans son ensemble, déplacez les images individuellement. Vous pouvez vérifier si un élément est visible par quelque chose comme ceci, par exemple. instance:

function isItemVisible(li) { 
    var w = li.outerWidth() 
    var pos = li.position(); 
    return pos.left + w > 0 && pos.left < $products.innerWidth(); 
} 

Vous devez toujours déterminer quand réorganiser des éléments individuels, mais peut-être que cela vous aide à démarrer. Vous devrez peut-être maintenir une structure de données distincte dans laquelle vous pouvez réorganiser les éléments si nécessaire, ou au moins maintenir un pointeur leftmost et rightmost sur l'élément (actuellement) le plus à gauche et le plus à droite.