jQuery图像滑块二次显示二次图像

Question

目前，试图让一个滑块为一个网站工作，我似乎不明白为什么我的滑块显示第二个图像连续两次，但从那时起，它的工作完美。

这是我的jQuery：

$(document).ready(function(){
var bgArr = ["https://d17fnq9dkz9hgj.cloudfront.net/uploads/2013/09/cat-black-superstitious-fcs-cat-myths-162286659.jpg",
            "https://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg",
            "https://img.buzzfeed.com/buzzfeed-static/static/2015-03/3/16/enhanced/webdr09/enhanced-7711-1425417143-1.jpg?downsize=715:*&output-format=auto&output-quality=auto",
            "https://www.bluecross.org.uk/sites/default/files/styles/image_slice_small/public/assets/images/112970.jpg?itok=qh9iUCOb"]; 

var i = 0;

var $bg1 = $('.background-1').css('background-image', 'url('+bgArr[0]+')').css('right', '0%');
var $bg2 = $('.background-2').css('background-image', 'url('+bgArr[1]+')').css('right', '-100%');

var bgSlide = function($bg) {
    $bg.animate({ right: '+=100%' }, 600, function(){ 
        if(parseInt($bg.css('right')) > 0) {
            $bg.css('right', '-100%');
            (i < bgArr.length-1) ? i++ : i=0;
            $bg.css("background-image", "url("+bgArr[i]+")");
        }                           
    } );
}

setInterval(function() {                
    bgSlide($bg1);
    bgSlide($bg2);                          
}, 2500);

})；

在这里，它正在发挥作用：

​

$(document).ready(function(){
	var bgArr = ["https://d17fnq9dkz9hgj.cloudfront.net/uploads/2013/09/cat-black-superstitious-fcs-cat-myths-162286659.jpg",
			    "https://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg",
			    "https://img.buzzfeed.com/buzzfeed-static/static/2015-03/3/16/enhanced/webdr09/enhanced-7711-1425417143-1.jpg?downsize=715:*&output-format=auto&output-quality=auto",
			    "https://www.bluecross.org.uk/sites/default/files/styles/image_slice_small/public/assets/images/112970.jpg?itok=qh9iUCOb"]; 
	
    var i = 0;
			
	var $bg1 = $('.background-1').css('background-image', 'url('+bgArr[0]+')').css('right', '0%');
	var $bg2 = $('.background-2').css('background-image', 'url('+bgArr[1]+')').css('right', '-100%');
			
	var bgSlide = function($bg) {
		$bg.animate({ right: '+=100%' }, 600, function(){ 
			if(parseInt($bg.css('right')) > 0) {
				$bg.css('right', '-100%');
				(i < bgArr.length-1) ? i++ : i=0;
				$bg.css("background-image", "url("+bgArr[i]+")");
			}							
		} );
	}
			
	setInterval(function() {				
		bgSlide($bg1);
		bgSlide($bg2);							
	}, 2500);
});

body {
	position: relative;
	background: transparent;
	height: 90vh;
    overflow-x: hidden;
}
.background-1, .background-2 {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: transparent;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0 auto;
    background-position: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background-1"></div>
<div class="background-2"></div>

​

(只是从互联网上为占位符抓取图像)

我喜欢帮忙。

Answer 1

这是因为你最初设置了前两张图片，然后在第一次运动之后设置了下一张等等。但是，要选择next的图片的索引并没有考虑到最初设置的2张图片，而不仅仅是一张。

简而言之，将var i = 0;更改为var i = 1;