Question

当它到达最后一张图像时效果不佳，我必须点击两次才能返回第一张图片。

var i = 1;
$('.rightArrow').click(function () {
    if(i != 4) {
        $('body').css(
            'background',
            'linear-gradient(rgba(0, 0, 0, 0.30),rgba(0, 0, 0, 0.30)), url("'+
                customerBgs[i]+'") no-repeat center center fixed'
        );
        i++;
    }else{
        i = 0;
        $('body').css(
            'background',
            'linear-gradient(rgba(0, 0, 0, 0.30),rgba(0, 0, 0, 0.30)), url("'+
                customerBgs[i]+'") no-repeat center center fixed'
        );

    }
});

Answer 1

为什么没有更简单的东西

var i = 0;
var customerBgs = ['http://placehold.it/350x150', 'http://placehold.it/500x100', 'http://placehold.it/100x510', 'http://placehold.it/300x500'];
$('.rightArrow').click(function() {
    $('body').css(
        'background',
        'linear-gradient(rgba(0, 0, 0, 0.30),rgba(0, 0, 0, 0.30)), url("' + customerBgs[i] + '") no-repeat center center fixed');
    i = ++i % customerBgs.length;
});

下面的演示

＆＃13;

var i = 0;
var customerBgs = ['http://placehold.it/350x150', 'http://placehold.it/500x100', 'http://placehold.it/100x510', 'http://placehold.it/300x500'];
$('.rightArrow').click(function () {
    $('body').css(
        'background',
        'linear-gradient(rgba(0, 0, 0, 0.30),rgba(0, 0, 0, 0.30)), url("' + customerBgs[i] + '") no-repeat center center fixed');
    i = ++i % customerBgs.length;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input class="rightArrow" type="button" value="right" />

＆＃13;

Answer 2

我假设customerBgs从0开始

var i = 0;
$('.rightArrow').click(function(){
    i++;
    if (i > customerBgs.length - 1) {
        i = 0;
    }
    $('body').css(
        'background',
        'linear-gradient(rgba(0, 0, 0, 0.30),rgba(0, 0, 0, 0.30)), url("'+
            customerBgs[i]+'") no-repeat center center fixed'
    );
});

Answer 3

你没有在你的else块中递增i，所以它重置为图像0，然后再继续设置背景的过程，然后再转到图像1.然而，你可能会将增量拉出如果是这种情况，只需检查一下你是否需要在设置背景之前回绕到0。这样可以避免在两个块中复制背景设置。

无限循环一组图像

3 个答案: