は、まずここで、スライダ

Question

用をループ私はスライダーが終了すると、私は最初のスライドを表示することができませんループした後、スライダーを作成しようとしていますlink

です。私は、スライダに連続したループ内のすべてのスライダを中断することなく表示するようにします。

HTMLコード：DIV '#mydiv' インサイド

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

はスライダーが追加されます。

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

Answer 2

作業

私は、この変数を私がフィニッシュ地点を確認することができますし、0にtranslate_valueを設定var finishNumber = imageHeight * imageURLS.length;を追加します。

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

HTML：

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

CSS：

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%; 
} 

実例：https://jsfiddle.net/81jhnb5a/2/