循环通过滑块

Looping through for slider

本文关键字：循环      更新时间：2023-09-26

首先是链接

我正在尝试创建一个滑块，滑块完成循环后，我无法显示第一张幻灯片。我希望滑块在连续循环中显示所有的滑块，没有任何中断。

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

任何帮助都会很感激。

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

count++;
count%=imageURLS.length;

Count将继续递增，但在到达结束后自动换行。

工作示例

我添加了var finishNumber = imageHeight * imageURLS.length;，所以有了这个变量，我可以检查终点并将translate_value设置为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();
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/

相关文章：