Ciclul înapoi prin diapozitive

Am următorul jQuery:

            var $active = $('#slideshow li.active');

            if ( $active.length == 0 ) $active = $('#slideshow li:last');

           //use this to pull the images in the order they appear in the markup
            var $next =  $active.next().length ? $active.next()
                : $('#slideshow li:first');

           //uncomment the 3 lines below to pull the images in random order

           //var $sibs  = $active.siblings();
           //var rndNum = Math.floor(Math.random() * $sibs.length );
           //var $next  = $( $sibs[ rndNum ] );


            $active.addClass('last-active');

            $next.css({opacity: 0.0})
                .addClass('active')
                .animate({opacity: 1.0}, 500, function() {
                    $active.removeClass('active last-active');
                });

Cum pot modifica acest lucru astfel încât să pot circula înapoi?

Am ajuns atât de departe, dar nu circulă înapoi la ultimul element de la primul. Trebuie să fie ceva destul de simplu că lipsesc, dar chiar nu pot să-mi pun degetul pe ea.

            var $active = $('#slideshow li.active');

            if ( $active.length == 0 ){ $active = $('#slideshow li:last');}

           //use this to pull the images in the order they appear in the markup
            var $next =  0 ? $active.prev()
                : $('#slideshow li:first');

           //uncomment the 3 lines below to pull the images in random order

           //var $sibs  = $active.siblings();
           //var rndNum = Math.floor(Math.random() * $sibs.length );
           //var $next  = $( $sibs[ rndNum ] );


            $active.addClass('last-active');

            $next.css({opacity: 0.0})
                .addClass('active')
                .animate({opacity: 1.0}, 500, function() {
                    $active.removeClass('active last-active');
                });
0

1 răspunsuri

Soluția currrent verifică dacă există un element după elementul active . Vom schimba acest lucru pentru a vedea dacă există înainte elementul active . Schimbarea originală este pentru a selecta primul element de listă din #slideshow . În schimb, vom selecta ultima.

var $next = $active.prev().length ? $active.prev() : $('#slideshow li:last');

Dacă nu sunteți familiarizat cu operatorul ternar, este în esență același lucru ca și scrierea unei instrucțiuni if:

// If there are previous elements
if ( $active.prev().length > 0 ) {
   //The next element will be the previous element
    $next = $active.prev();
} else {
   //The next element will be the last list item in #slideshow
    $next = $("#slideshow li:last");
}
0
adăugat
@AntonioMoore "Dacă avem elemente anterioare." Porțiunea .length numără porțiunea .prev() . Deci este ca și cum ai întreba: "Cât de mulți .prev() avem?" Dacă nu există niciunul, 0 va fi valoarea, iar acest lucru este considerat falsy în JavaScript. jQuery returnează un element cu .prev() , deci așteptăm ca .length să fie 1 . Dacă nu este, știm că nu avem niciun element anterior.
adăugat autor Sampson, sursa
@JohnathanSampson vă mulțumesc foarte mult! Știam că era ceva de genul asta, dar mă străduiam să citesc jQuery. Îmi place să încerc să-l interpretez în engleză, dar se străduia să citească exact ce a făcut codul.
adăugat autor Antonio Moore, sursa
Cum se citește exact dacă ($ active.prev (). Lungime)? Se întreabă dacă există o lungime?
adăugat autor Antonio Moore, sursa
Ah, acum înțeleg! Foarte mult apreciat Jonathan! Tocmai m-ai ajutat să termin primul meu plugin jQuery!
adăugat autor Antonio Moore, sursa