Question

这是我目前所拥有的：

HTML：

<div class="slides">
    <div class="slide1-img">
    </div>
</div>

jQuery的：

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

CSS：

.slides {
width: 100%;
height: 300px;
overflow: hidden;
}

.slide1-img {
background: url(http://us.123rf.com/400wm/400/400/konradbak/konradbak1103/konradbak110300502/9188750-beautiful-lady-with-long-brown-hair.jpg) 0 0 no-repeat;
width: 100%;
height: 100%;
background-size: cover;
background-size: 110%;
}


.slide2-img {
background: url(http://us.123rf.com/450wm/itrifonov/itrifonov1210/itrifonov121000202/15752531-closeup-portrait-of-a-beautiful-young-woman-with-elegant-long-shiny-hair--concept-hairstyle.jpg) 0 0 no-repeat;
width: 100%;
height: 100%;
background-size: 110%;
}


.slide3-img {
background: url(http://us.123rf.com/450wm/subbotina/subbotina1307/subbotina130700109/20793602-beauty-woman-touching-her-long-and-healthy-brown-hair.jpg) 0 0 no-repeat;
width: 100%;
height: 100%;
background-size: 110%;
}

目前它在转换之前重复两次相同的图像。如何修复jQuery以便它一次只显示一个图像？

Answer 1

通过将超时置于0来删除第二个动画

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

DEMO：http://jsfiddle.net/Wr2qc/

自定义jQuery滑块重复相同的图像

1 个答案: