Êtes-vous capable de le résoudre? Implémentation de carrousel JavaScript à l’aide d’un tableau

Je ne peux pas résoudre ce problème, êtes-vous capable de le résoudre? J’aurais besoin de votre avis d’expert sur la façon de le faire dans JS vanilla ou jQuery (facultatif). Un échantillon de code sur jsfiddle serait hautement apprécié.

Je dois afficher un tableau de 5 éléments dans une liste avec une limite de 3 en même temps

var range = [0,1,2,3,4];  0
 1
 2
 
 prev
 next

Lorsque l’utilisateur clique sur “suivant”, je dois append une classe “focus” sur le premier “li”.

  0
 1
 2

Deuxième clic sur “suivant”

  0
 1
 2

cliquez sur “suivant” …

  0
 1
 2

cliquez sur “suivant” … remarque tableau changement

  1
 2
 3

cliquez sur “suivant” … changement de tableau

  2
 3
 4

cliquez sur “suivant” … mais je ne peux pas aller plus loin car il n’y a pas d’élément dans le tableau à afficher, donc si je clique sur “prev”, j’aimerais avoir l’inverse

cliquez sur “prev”…

  2
 3
 4

cliquez sur “prev”…

  2
 3
 4

cliquez sur “prev”… remarque tableau changement

  1
 2
 3

cliquez sur “prev”… remarque tableau changement

  0
 1
 2

cliquez sur “prev”… rien ne se passe il a nous avons atteint le début allez le tableau

  0
 1
 2

Une idée? Merci d’avance

Solutions révisées comme suggéré dans les réponses

http://jsfiddle.net/QwATR/

C’est assez simple en vanille javascript ( jsfiddle )

 var range = [0, 1, 2, 3, 4], lis = document.getElementsByTagName('li'), foc, offset = 0; function next() { if (foc === undefined) { foc = 0; } else if (foc < lis.length - 1) { foc++; } else if (offset + foc < range.length - 1) { offset++; } rewriteList(); } function previous() { if (foc === undefined) { foc = 0; } else if (foc > 0) { foc--; } else if (offset > 0) { offset--; } rewriteList(); } function rewriteList() { for (var i = 0; i < lis.length; i++) { lis[i].innerHTML = range[i + offset]; lis[i].className = i == foc ? 'focus' : ''; } } document.getElementById('prev').onclick = previous; document.getElementById('next').onclick = next;

Sinon, vous pouvez configurer les carrousels avec une fonction constructeur ( jsfiddle )

 // Initalize everything var curPos = 0; var minIndex = 0; var maxIndex = 2; var clicks = 0; var range = ['0','1','2','3','4','5','6','7','8','9','10']; if($('li.focus').length === 0) { $('ul > li:eq(0)').addClass('focus'); $('ul > li').each(function(index){ $(this).text(range[index+curPos]); }); } // Next click handler $('#next').click(function(){ if($('ul li').index($('li.focus')) < 2) { $('li.focus').removeClass('focus'); if(curPos < 2) curPos++; else { clicks++; } $('ul > li:eq('+curPos+')').addClass('focus'); } else { if(clicks < range.length -3) clicks++; } $('ul > li').each(function(index){ $(this).text(range[index+clicks]); }); }); // Previous click handler $('#prev').click(function(){ if($('ul li').index($('li.focus')) > 0) { $('li.focus').removeClass('focus'); if(curPos > 0) curPos--; else { clicks--; } $('ul > li:eq('+curPos+')').addClass('focus'); } else { if(clicks > 0) clicks--; } $('ul > li').each(function(index){ $(this).text(range[index+clicks]); }); console.log('clicks after prev:' + clicks); });

http://jsfiddle.net/QAsQj/2/

 $(function(){ $("#next").click(function(){ if($(".focus").length == 0){ $("ul li:first-child").addClass("focus"); } else{ if($(".focus").is(":last-child")){ $("ul li").each(function(){ var content = $(this).next("li").html(); $(this).empty().html(content); } $(".focus").html(/**WHATEVER YOUR NEXT CONTENT IS**/); } else{ var active = $(".focus"); $("ul li").removeClass("focus"); active.next("li").addClass("focus"); } } } ); $("#prev").click(function(){ if($(".focus").length == 0){ break; } else{ if($(".focus").is(":first-child")){ $("ul li").each(function(){ var content = $(this).prev("li").html(); $(this).empty().html(content); } $(".focus").html(/**WHATEVER YOUR PREV CONTENT IS**/); } else{ var active = $(".focus"); $("ul li").removeClass("focus"); active.prev("li").addClass("focus"); } } } ); } );