Javascript 为滑块循环

首先，这里是

我正在尝试创建一个滑块，在滑块完成循环后，我无法显示第一张幻灯片。我希望滑块以连续循环的方式显示所有滑块，不间断

HTML代码：

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

在div“#mydiv”中添加了滑块

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();

$（文档）.ready（函数（）{
var screenHeight=$（window.height（）；
var screenWidth=$（文档）.width（）；
$（“.main slider”）.css（“高度”，屏幕高度+4）；
var imageURL=[
"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_2;-DFN3Pt5M-sWe_2;-CMxR6MDz3eV9i38bA2“，
"https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTyer4s2_wLSkH86aSggqXv5nXU6z6pQC_RNGYEcIgjuQAESwtG",
"https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSwQAHl6_-8GpV7c86T_QSSWLF6SYYL4JOYVH4FLC2DCZDIZGL“
];
$.each（图像URL、函数（k、v）{
$（'#mydiv'）。附加（''）；
});
$（“.image\u block img”）.css（“宽度”，屏幕宽度）；
$（“.image\u block img”）.css（“高度”，屏幕高度）；
函数初始_调用（）{
$（'.image_block img'）.eq（0）.attr（'src'，imageurl[0]）；
$（'.image_block img'）.eq（1）.attr（'src'，imageurl[1]）；
}
//初始_调用（）；
var计数=1；
setInterval（函数（）{
平移值=计数*屏幕高度+计数*4；
$（“#mydiv”）.css（“转换”，“转换（0px，-”+translate_值+“px）”）；
计数++；
}, 2000);
}); //$（document.ready（）结尾；

---

任何帮助都将不胜感激

您只需添加以下行：

count++;
count%=imageURLS.length;

计数将继续递增，但到达终点后会自动换行

---

工作

I添加

var finishNumber=imageHeight*imageurl.length

因此，使用此变量，我可以检查终点并将

translate\u值设置为
0

if(translate_value == finishNumber){
    translate_value = 0;
}

最终代码

jQuery：

$(document).ready(function() {
var screenHeight = $(window).height();
var screenWidth = $(document).width();
var imageHeight = screenHeight;
$(".main-slider").css("height", screenHeight);

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;
var translate_value = 0;
var finishNumber = imageHeight * imageURLS.length;
setInterval(function() {
    console.log(imageURLS.length)
    translate_value = translate_value + screenHeight;
    if(translate_value == finishNumber){
        translate_value = 0;
    }
    $("#mydiv").css("transform", "translate(0px,-" + translate_value + "px)");

    count++;
}, 2000);




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

工作示例：
谢谢您的回答。我想让它在最后一张幻灯片之后显示第1张幻灯片。@chandan URL（0）或索引1中的第一张幻灯片？你看过这个例子了吗？它没有按预期工作吗？是的，这确实是一个改进，但我想让滑块像1-2-3-4-5-1-2-3-4-5一样处于连续循环中……这是一个连续循环，我不明白什么对你不起作用？谢谢你的回答，但它删除了预期的动画效果。我更新了代码，你想要循环还是回到第一个循环@chandanThanks但我希望它像1-2-3-4-5-1-2-3-4-5-1-2-3-4-4-5
<div class="main-container">
    <div class="main-slider">
        <div id="mydiv">    
        </div>
    </div>
</div>

html,body{
  padding: 0px;
  margin: 0px;
}
.main-container{
  width: 100%;
}
.main-slider{
  height: 100%;
  overflow: hidden;
}
.image_block img{
  display: block;
}
#mydiv{
  -webkit-transition: all 1s cubic-bezier(.77,0,.175,1); /* For Safari 3.1 to 6.0 */
  transition: all 1s cubic-bezier(.77,0,.175,1);

  display: inline-block;
 }
 .primary-slide img,
 .followup-slide img,
 .slide img{
    width: 100%;
 }