你能解决吗？ 使用数组的JavaScript轮播实现

我无法解决这个问题，你能解决吗？ 我需要你的专家建议如何在JS vanilla或jQuery（可选）中做到这一点。 jsfiddle上的代码示例将受到高度赞赏。

我必须在列表中显示一个包含5个元素的数组，一次限制为3

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

当用户点击“下一步”时，我需要在第一个“li”上添加一个“焦点”类。

 
 
0
 
1
 
2
  

再次点击“下一步”

 
 
0
 
1
 
2
  

点击“下一步”……

 
 
0
 
1
 
2
  

点击“下一步”…注意数组移位

 
 
1
 
2
 
3
  

点击“下一步”…arrays移位

 
 
2
 
3
 
4
  

点击“下一步”…但我不能再继续了，因为数组中没有要显示的元素，所以如果我点击“prev”我想反过来

点击“上一个”…

 
 
2
 
3
 
4
  

点击“上一个”…

 
 
2
 
3
 
4
  

点击“prev”…注意数组移位

 
 
1
 
2
 
3
  

点击“prev”…注意数组移位

 
 
0
 
1
 
2
  

点击“prev”…没有任何事情发生它我们到达开始去arrays

 
 
0
 
1
 
2
  

任何的想法？ 提前致谢

修正后的解决方案，如答案所示

http://jsfiddle.net/QwATR/

Answer 1

这在vanilla 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; 

或者，您可以使用构造函数设置轮播（ jsfiddle ）

Answer 2

 // 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/

Answer 3

 $(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"); } } } ); } );