javascript - 自定义 jQuery slider 重复相同的图像 - 不递增到 'i'

Question

目前它在转换之前重复相同的图像两次。它似乎没有通过“i”递增。我该如何修复 jQuery，使其一次只显示每张图片一次？

这是 fiddle : http://jsfiddle.net/9DU5M/

$(function () {
                var i = 1;
                (function doAnimation() {
                    $('.slide' + i + '-img').css({ 'background-position-x': '-50px', opacity: 1 }).animate({ 'background-position-x': '-5px' }, 5000, 'linear').animate({ 'background-position-x': '0px', opacity: 0 }, 500, 'linear', function () {
                        $(this).attr('class', 'slide' + (i = i == 3 ? 1 : i + 1) + '-img').css({ 'background-position-x': '-50px', opacity: 1 }).animate({ 'background-position-x': '-5px' }, 5000, 'linear').animate({ 'background-position-x': '0px', opacity: 0 }, 500, 'linear', doAnimation);
                    });
                })();
            });

Answer 1

当您更改为新图像时，您正在显示它，然后在您返回再次显示之前淡出它。只需淡入并返回显示即可:

$(function () {
    var i = 1;
    (function doAnimation() {
        $('.slide' + i + '-img').css({
            'background-position-x': '-50px',
            opacity: 1
        }).animate({
            'background-position-x': '-5px'
        }, 5000, 'linear').animate({
            'background-position-x': '0px',
            opacity: 0
        }, 500, 'linear', function () {
            $(this).attr('class', 'slide' + (i = i == 3 ? 1 : i + 1) + '-img').animate({
                'background-position-x': '0px',
                opacity: 1
            }, 500, 'linear', doAnimation);
        });
    })();
});

演示:http://jsfiddle.net/Guffa/9DU5M/1/

注意:我不确定您要对背景位置做什么。 background-position-x 样式是非标准的，只存在于 IE 和 Webkit 浏览器(Safari)中。您需要使用 background-position 样式以使其在更多浏览器中工作。