更改范围位置以从数组显示

Question

我正在处理一个显示数组最后 12 项的水平列表。

我想要做的是调整要显示的范围。

例如。数组长度为 50，默认显示最后 12 项（39-50）。所以如果我点击 LEFT 按钮，下一个项目将是 26-38。与右键相同。

我试图实现答案here，但没有运气。

希望你能帮助我。

谢谢。

var arrResults = [40, 100, 1, 5, 25, 10, 12, 32, 41, 51, 15, 13, 11, 55, 62, 64, 75, 77, 33, 1, 5, 25, 10, 12, 32, 41, 51, 15, 13, 11, 55, 62, 64, 75, 77, 33];
var len = arrResults.length;
var lastTwelve = arrResults.slice(Math.max(arrResults.length - 12));
lastTwelve.reverse();
for (var i = 0; i < lastTwelve.length; i++) {
   $('ul').prepend('<li><p>'+ len +'</p><p>'+ lastTwelve[i] +'</p></li>');
            len--;
        }

$('.left').click(function(){
    
});

ul li{
  list-style-type: none;
  width: 30px;
  float: left;
  background-color: #DDD;
  border: 1px solid #FFF;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  
</ul>

<button class="left">LEFT</button>
<br>
<button class="left">RIGHT</button>

Answer 1

可能是这样的：

var k = 1;
displayData(k);
function displayData(k){

var arrResults = [40, 100, 1, 5, 25, 10, 12, 32, 41, 51, 15, 13, 11, 55, 62, 64, 75, 77, 33, 1, 5, 25, 10, 12, 32, 41, 51, 15, 13, 11, 55, 62, 64, 75, 77, 33];
var len = arrResults.length;
$('.ulclass').empty();
var temp=len-(k-1)*12;
for (var i =(len-(k-1)*12) ; i >(len-12*k) ; i--) {
   $('ul').prepend('<li><p>'+ temp +'</p><p>'+ arrResults[i-1] +'</p></li>');
         temp-- ;
        }
}
$('.left').click(function(){
    k = k+1;
    displayData(k);
});

$('.right').click(function(){
  k = k-1;
  displayData(k);
});

ul li{
  list-style-type: none;
  width: 30px;
  float: left;
  background-color: #DDD;
  border: 1px solid #FFF;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <ul class="ulclass">
      
    </ul>
    
    <button class="left">LEFT</button>
    <br>

    <button class="right">RIGHT</button>

只需检查您是否超出范围，因为我没有实现它。

希望能帮到你。