javascript - 循环遍历 slider

Question

首先是link

我正在尝试创建一个 slider ，在 slider 完成循环后我无法显示第一张幻灯片。我希望 slider 在连续循环中不间断地显示所有 slider 。

HTML代码:

<div class="main-container">
    <div class="main-slider">
        <div id="mydiv">    
        </div>
    </div>
</div>

在 div '#mydiv' 中添加了 slider 。

JS代码:

$(document).ready(function() {
var screenHeight = $(window).height();
var screenWidth = $(document).width();

$(".main-slider").css("height", screenHeight + 4);


var imageURLS = [
    "http://images6.fanpop.com/image/photos/36800000/Beautiful-Landscapes-image-beautiful-landscapes-36803145-1920-1080.jpg",
    "http://www.cnmuqi.com/data/out/222/images-of-landscapes-7409399.jpeg",
    "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS5cXFv_tmqWQFHllbUOvL9reoqTB9jQLWc-16Sj_r2vKPhNqobaQ",
    "http://www.ucreative.com/wp-content/uploads/2014/11/Landscape-Photography-Banner1.jpg",
    "http://www.qqxxzx.com/images/images-of-landscapes/images-of-landscapes-8.jpg",
    "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRNO6NIwG_n-pFppB_-DFN3Pt5M-sWe_-CMxR6MDz3eV9i38bA2",
    "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTyer4s2_wLSkH86aSggqXv5nXU6z6pQC_RNGYEcIgjuQAESwtG",
    "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSwQAHl6_-8GpV7c86T_qSSWlF6bsyyl4JoYVh4flC2dcZDiZGL"

];

$.each(imageURLS, function(k, v) {
    $('#mydiv').append('<div class="image_block"><img  src="' + v + '" /></div>');
});

$(".image_block img").css("width", screenWidth);
$(".image_block img").css("height", screenHeight);

function initial_call() {

    $('.image_block img').eq(0).attr('src', imageURLS[0]);
    $('.image_block img').eq(1).attr('src', imageURLS[1]);
}
//  initial_call();
var count = 1;
setInterval(function() {

    translate_value = count * screenHeight + count * 4;
    $("#mydiv").css("transform", "translate(0px,-" + translate_value + "px)");

    count++;
}, 2000);




}); //end of $(document).ready();

如有任何帮助，我们将不胜感激。

Answer 1

您可以简单地添加以下行:

count++;
count%=imageURLS.length;

计数将继续递增，但一旦到达末尾就会回绕。

工作 example