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

}）;

这是在行动：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

（刚从互联网上为占位符抓取图像）

我非常喜欢帮助。

jQuery Image滑块显示第二个图像两次

0 个答案: