javascript - 无限循环一组图像

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

下面是演示

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

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