Ayuda con el carrusel de jquery infinito auto-rotativo. No se puede hacer que el carrusel bucle infinitamente en lugar de 'rebobinar'

Estoy construyendo un carrusel de imágenes auto-rotativo con jquery y estoy tratando de hacer que las imágenes giren infinitamente en lugar de cuando llega a la última image, 'rebobina' de return a la primera image y comienza de nuevo. Lamentablemente, soy bastante nuevo en el juego jquery, así que estoy teniendo problemas para hacer que esto funcione. Intenté juntar el código que encontré en tutoriales en línea y modificarlo para que se ajuste a mi código, pero no tuve suerte. Creo que tendré que clonar las imágenes existentes para que aparezcan después de que pasen por el ciclo, pero no estoy seguro de qué dirección tomar. Cualquier ayuda es muy apreciada. Aquí está el código con el que estoy trabajando a continuación:

HTML:

<div class="main_view"> <div style="width:165px; height:98px; margin:0; padding:0; border:0;"> <img src="/content/template_images/wanalogo-blackBG-165x98.png" /> </div> <div class="window"> <ul class="image_reel"> <li><a href="/MLB/Philadelphia-Phillies-Tickets" title="Phillies"><img src="/content/template_images/Banners/SideBanner/imgscroll1.jpg" alt="Phillies" /></a></li> <li><a href="/NFL/Philadelphia-Eagles-Tickets" title="Eagles"><img src="/content/template_images/Banners/SideBanner/imgscroll2.jpg" alt="Eagles" /></a></li> <li><a href="/NHL/Philadelphia-Flyers-Tickets" title="Flyers"><img src="/content/template_images/Banners/SideBanner/imgscroll3.jpg" alt="Flyers" /></a></li> <li><a href="/NBA/Philadelphia-76ers-Tickets" title="76ers"><img src="/content/template_images/Banners/SideBanner/imgscroll4.jpg" alt="76ers" /></a></li> <li><a href="/NCAA-Basketball" title="NCAA Basketball"><img src="/content/template_images/Banners/SideBanner/imgscroll8.jpg" alt="NCAA Basketball" /></a></li> <li><a href="/Concerts-Tickets" title="Concerts"><img src="/content/template_images/Banners/SideBanner/imgscroll5.jpg" alt="Concerts" /></a></li> <li><a href="/Theatre-Tickets" title="Theatre"><img src="/content/template_images/Banners/SideBanner/imgscroll6.jpg" alt="Theatre" /></a></li> <li><a href="/Other-Events-Tickets" title="Family Events"><img src="/content/template_images/Banners/SideBanner/imgscroll7.jpg" alt="Family Events" /></a></li> </ul> </div> <div style="width:170px; height:290px; border:0; padding:0; margin: -290px 0px 0px 0px;"> <img src="/content/template_images/black-fade-border-170x290.png" /> </div> <div class="botTextBox"> <center> <div class="botText"> <a href="/MLB/Philadelphia-Phillies-Tickets" title="Phillies">Phillies</p></a> <a href="/NFL/Philadelphia-Eagles-Tickets" title="Eagles"><p>Eagles</p></a> <a href="/NHL/Philadelphia-Flyers-Tickets" title="Flyers"><p>Flyers</p></a> <a href="/NBA/Philadelphia-76ers-Tickets" title="76ers"><p>76ers</p></a> <a href="/NCAA-Basketball" title="NCAA Basketball"><p>NCAA Basketball</p></a> <a href="/Concerts-Tickets" title="Concerts"><p>Concert</p></a> <a href="/Theatre-Tickets" title="Theatre"><p>Theatre</p></a> <a href="/Other-Events-Tickets" title="Family Events"><p>Family Event</p></a> </div> </center> </div> <div class="paging"> <a href="#" rel="1">1</a> <a href="#" rel="2">2</a> <a href="#" rel="3">3</a> <a href="#" rel="4">4</a> <a href="#" rel="5">5</a> <a href="#" rel="6">6</a> <a href="#" rel="7">7</a> <a href="#" rel="8">8</a> </div> </div> 

Javascript

 $(document).ready(function() { $(".paging").show(); $(".paging a:first").addClass("active"); var imageWidth = $(".window").width(); var imageSum = $(".image_reel img").size(); var imageReelWidth = imageWidth * imageSum; $(".image_reel").css({'width' : imageReelWidth}); rotate = function(){ var triggerID = $active.attr("rel") - 1; //Get number of times to slide var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide $(".paging a").removeClass('active'); //Remove all active class $active.addClass('active'); //Add active class (the $active is declanetworking in the rotateSwitch function) //Slider Animation $(".image_reel").animate({ left: -image_reelPosition }, 750 ); $(".botText").animate({ left: -image_reelPosition }, 750 ); }; //Rotation and Timing Event rotateSwitch = function(){ play = setInterval(function(){ //Set timer - this will repeat itself every X seconds $active = $('.paging a.active').next(); //Move to the next paging if ( $active.length === 0) { //If paging reaches the end... $active = $('.paging a:first'); //go back to first } rotate(); //Trigger the paging and slider function }, 1500); //Timer speed in milliseconds (7 seconds) }; rotateSwitch(); //Run function on launch //On Hover $(".image_reel a").hover(function() { clearInterval(play); //Stop the rotation }, function() { rotateSwitch(); //Resume rotation timer }); //On Click $(".paging a").click(function() { $active = $(this); //Activate the clicked paging //Reset Timer clearInterval(play); //Stop the rotation rotate(); //Trigger rotation immediately rotateSwitch(); // Resume rotation timer return false; //Prevent browser jump to link anchor }); }); 

Editar- CSS:

 .main_view { float: left; overflow:hidden; position: relative; width:170px; height:475px; background-color:black; border:0; margin:2px; padding:2px 0px 2px 0px; text-align:center; } .window { height:290px; width:170px; overflow: hidden; position: relative; background-color:black; border:0; padding:0px; margin:0px; } .image_reel { position: absolute; top: 0; left: 0; margin-left:-40px; } .image_reel img {float: left;} .botTextBox { height:87px; width:1360px; overflow:hidden; position:relative; background:url(/content/template_images/black-side-bottom-170x87.png) no-repeat; margin:0px; padding:0px; } .botText { position:relative; top:0; left:0; margin:32px 0px 0px 0px; padding:0; text-align:center; } .botText p {width:170px; float: left;} .paging { position: absolute; bottom: 40px; right: -7000px; width: 178px; height:47px; z-index: 100; text-align: center; line-height: 40px; display: none; } .paging a { padding: 5px; text-decoration: none; color: #fff; } .paging a.active { font-weight: bold; background: #920000; border: 1px solid #610000; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; } .paging a:hover {font-weight: bold;} 

… en realidad se puede ver el banner flash a la derecha que estoy tratando de replace con un jquery uno …

Una vez más, realmente agradezco cualquier ayuda con esto. Como dije, soy un poco nuevo en el trabajo con jQuery y he estado tropezando con esto todo el día. Un millón de gracias.

2 Solutions collect form web for “Ayuda con el carrusel de jquery infinito auto-rotativo. No se puede hacer que el carrusel bucle infinitamente en lugar de 'rebobinar'”

Peter Ajtai tiene un buen resumen de un método, pero tengo otro que solo requiere agregar algunas líneas a su secuencia de commands.

Básicamente, clona el primer enlace de image, text y buscapersonas y lo agrega al final. Cuando la animation termina en la última image (que ahora es la primera), el posicionamiento izquierdo de la window se restablece a cero y la animation se reanuda. Traté de agregar comentarios con [NEW] para que pueda encontrar más fácilmente los cambios. Y, hice una demostración, así que espero que quede claro.

 $(document).ready(function() { $(".paging").show(); $(".paging a:first").addClass("active"); var imageWidth = $(".window").width(); // [NEW] add one, since we are adding the first image to the end var imageSum = $(".image_reel img").size() + 1; var imageReelWidth = imageWidth * imageSum; // [NEW] included modifying width of botTextBox $(".image_reel, .botTextBox").css({'width' : imageReelWidth }); // [NEW] clone first image & text and add it to the end, include dummy paging $(".image_reel li:first").clone().appendTo( $(".image_reel") ); $(".botText a:first").clone().appendTo( $(".botText") ); $(".paging").append('<a href="#" rel="' + imageSum + '"></a>'); // don't include the number in the link rotate = function(){ var triggerID = $active.attr("rel") - 1; //Get number of times to slide var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide $(".paging a").removeClass('active'); //Remove all active class $active.addClass('active'); //Add active class (the $active is declanetworking in the rotateSwitch function) // [NEW] Slider Animation $(".image_reel, .botText").animate({ left: -image_reelPosition }, 750, function(){ // [NEW] callback function (called when animation is done) if (triggerID == imageSum - 1) { // if we're back to the first image, reset the window position $(".image_reel, .botText").css('left',0); } }); }; //Rotation and Timing Event rotateSwitch = function(){ play = setInterval(function(){ //Set timer - this will repeat itself every X seconds $active = $('.paging a.active').next(); //Move to the next paging if ( $active.length === 0) { // If paging reaches the end... // [NEW] go back to second image (the first is now the last) $active = $('.paging a:eq(1)'); } rotate(); //Trigger the paging and slider function }, 1500); //Timer speed in milliseconds (7 seconds) }; rotateSwitch(); //Run function on launch //On Hover $(".image_reel a").hover(function(){ clearInterval(play); //Stop the rotation }, function(){ rotateSwitch(); //Resume rotation timer }); //On Click $(".paging a").click(function() { $active = $(this); //Activate the clicked paging //Reset Timer clearInterval(play); //Stop the rotation rotate(); //Trigger rotation immediately rotateSwitch(); // Resume rotation timer return false; //Prevent browser jump to link anchor }); }); 

Ah, y una última cosa … botText el <p> faltaba frente al botText de los Filis

El problema con tu carrusel es que el bloque de imágenes sigue siendo un bloque gigante, por lo que cuando llegues al final, debes deslizar todo el path de return a la primera image para hacer un ciclo, y esto es lo que causa ese aspecto de "rebobinado".

Lo que haría en su lugar es:

  1. Cargue cada image en una matriz
  2. Elimine todas less la primera image de la galería.
  3. Agregue la siguiente image (en una matriz siguiente con bucle es el number % length )
  4. Deslizador animado para mostrar la image siguiente
  5. Restablezca CSS y elimine la primera image ahora invisible
  6. Enjuague y repita.

A continuación se muestra una implementación de ejemplo con una function recursiva.

Creo una function deslizante que hace uso de .animate() de jQuery. En la callback de .animate() vuelvo a llamar a la function del control deslizante después de una breve pausa realizada por setTimeout() .

El ejemplo a continuación es bastante simple, puede ajustarlo fácilmente para, por ejemplo, mostrar las astillas de la image anterior y siguiente y otras cosas … Esto es solo para ilustrar una implementación simple de una diapositiva infinita con un número limitado de imágenes.

Agregué en una implementación simple de cómo mostrar un subtítulo cambiante debajo de la galería. La información para el título se toma de los códigos HTML de las imágenes. Este título también podría colocarse debajo de cada image y deslizarse junto con la image.

Ejemplo jsFiddle

 $(function() { var showing = 0; // which image is showing var imgs = []; // array to hold images HTML // Put image elements into an array imgs = $("#gallery img").toArray(); var numberOf = imgs.length; // Remove all but first image from DOM $("#slider").html(""); $("#slider").html(imgs[0]); // Add title text div $("#gallery").after('<a id="title"/>'); // The recursive slider function var nextImage = function() { // Add next image (only use increment once!) $("#slider").append(imgs[++showing % numberOf]); // Show image title $("#title").html($(imgs[showing % numberOf]).attr("title")); // Link to original $("#title").attr("href", $(imgs[showing % numberOf]).attr("src")); // Animate the slider $("#slider").animate({ left: '-=200' }, 2000, function() { // Remove image to the left $("#slider img:first").remove(); // Reset CSS $("#slider").css("left", "0px"); // Call animationg function again setTimeout(function() {nextImage(); }, 1000); }); } nextImage(); // Call next image for the first time }); 

El HTML estático consistiría en:

 <div id="gallery"> <div id="slider"> ... the images here ... </div> </div> 

PD: para ver el efecto de la correa protractora en el trabajo mira esto .

jQuery y JS methods y properties utilizadas:

  • .animate()
  • .append()
  • .css()
  • :first selector
  • .html()
  • .length
  • .remove()
  • setTimeout()
  • .toArray()
  • javascript jQuery: dada una list delimitada por comas, cómo determinar si existe un valor
  • Cómo usar jQuery para manejar tags de scripts añadidas dinámicamente en paralelo
  • Jquery Drag n Drop en CKEditor
  • Cerrar elemento onclick en cualquier lugar de la página
  • angularJS - split ng-repeat en múltiples elementos HTML
  • Comprender los types de elementos
  • no se puede agregar a jQuery wrap
  • setInterval utilizando una function no anónima que requiere parameters tiene que estar dentro de una function anónima. ¿Por qué?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.