自定义jQuery滑块，返回到第一张幻灯片

Question

I am practicing my jQuery skills by building a simple slider with 3 slides. 我正在通过构建包含3张幻灯片的简单滑块来练习jQuery技能。 There is an outer wrapper named slider wrapper that will have a set width of 1400px and a height of 350px. 有一个名为slover wrapper的外部包装器，其设置的宽度为1400px，高度为350px。

Inside this wrapper is an unordered list with its items floated left so that they display in a horizontal line. 在该包装器内部是一个无序列表，其项目向左浮动，以便它们以水平线显示。 This whole unordered list is then animated to move left by 1400px, making the sliding motion. 然后，将整个无序列表设置为动画以向左移动1400像素，从而进行滑动运动。 I am struggling to figure out how to return to the first slide without it looking terrible. 我正在努力寻找如何返回第一张幻灯片，而不会看起来很糟糕。 Here is my html: 这是我的html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
     <script type="text/javascript" src="jquery-1.11.1.js"></script>
    <script type="text/javascript" src="slider.js"></script>
        <style>
            * { margin: 0; padding: 0; }
            #sliderwrapper { width: 1400px; height: 350px; overflow: hidden; position:relative;}
            #sliderlist  { list-style: none; left: 0px; position:absolute; width:200000em;}
            .item { float: left; }

        </style>
    </head>


<body>

    <div id="sliderwrapper">

        <ul id="sliderlist">
            <li class="item 1">
                <div><img src="img1.png" /></div>
            </li>
            <li class="item 2">
                <div><img src="img2.png" /></div>
            </li>
            <li class="item 3">
                <div><img src="img3.png" /></div>
            </li>
        </ul>

    </div>

</body>
</html>

And here is my jQuery: 这是我的jQuery：

$(document).ready(function () {


    setInterval(slide, 1000);

    function slide() {

        var left = $('#sliderlist').css('left');
        left = left.substring(0, left.length - 2);
        if (left <= -2800) {

            /*var slide = $('#sliderlist li:first');
            $('#sliderlist').children('li:first').remove();
            $('#sliderlist').append(slide);*/

            $('#sliderlist').css('left', '0px');
            $('#sliderlist').animate({ left: "-=1400" }, "slow", "swing");
        }
        else {
            $('#sliderlist').animate({ left: "-=1400" }, "slow", "swing");


        }
    }

});

Every 1 second the slide function, which animates the list to the left, is called. 每隔1秒钟调用一次滑动函数，该函数将列表的左侧动画化。 Once the last slide is displayed (at -2800px) the first slide needs to display again, however I want it to slide in the same the other ones do, rather than just appearing. 一旦显示了最后一张幻灯片（-2800px），第一张幻灯片就需要再次显示，但是我希望它以与其他幻灯片相同的方式滑动，而不是仅仅出现。 If I set the left property to 0px then it just appears, and if I remove and append the items in a constant loop then the animation looks ugly. 如果我将left属性设置为0px，那么它只会出现，如果我以恒定循环的方式删除并附加这些项，则动画看起来很难看。

Answer 1

What about animating it back to 0 with some animation as you are sliding your slides with animation. 在用动画滑动幻灯片时，如何用一些动画将其动画设置回0呢？ For example 例如

if (left <= -800) {
    $('#sliderlist').animate({
        left: "0px"
    }, "slow", "swing");
} else {
    $('#sliderlist').animate({
        left: "-=400"
    }, "slow", "swing");
}

Animate from last slide to the first slide with some animation and it looks normal and this is the way many of jQuery sliders work. 从最后一张幻灯片到第一张幻灯片进行动画处理，并带有一些动画，它看起来很正常，这就是许多jQuery滑块的工作方式。

Answer 2

I managed to find a solution, here it is : 我设法找到一个解决方案，这里是：

http://jsfiddle.net/f6rey710/1/ http://jsfiddle.net/f6rey710/1/

function slide() {

        var left = $('#sliderList').css('left');
        left = left.substring(0, left.length - 2);
        if (left <= -800) {


            $('#sliderList').css('left', '-400px');
            var slide = $('#sliderList li:first');
            $('#sliderList').children('li:first').remove();
            $('#sliderList').append(slide);
            $('#sliderList').animate({ left: "-=400px" }, "slow", "swing");

        }
        else {
            $('#sliderList').animate({ left: "-=400" }, "slow", "swing");
        }
    }

Once the slide function has reached the end of the list elements in the list must be removed from the front of the queue and added to the end. 一旦滑动功能到达列表的末尾，则必须从队列的开头删除列表中的元素，并将其添加到末尾。

自定义jQuery滑块，返回到第一张幻灯片

问题描述

2 个解决方案

解决方案1
0 2014-09-02 07:33:53

解决方案2
0 已采纳 2014-09-02 11:35:21

自定义jQuery滑块，返回到第一张幻灯片

问题描述

2 个解决方案

解决方案1 0 2014-09-02 07:33:53

解决方案2 0 已采纳 2014-09-02 11:35:21

解决方案1
0 2014-09-02 07:33:53

解决方案2
0 已采纳 2014-09-02 11:35:21