Question

我正在通过构建一个包含3张幻灯片的简单滑块来练习我的jQuery技能。有一个名为slider wrapper的外包装器，其设置宽度为1400px，高度为350px。

在这个包装器里面是一个无序列表，其项目向左浮动，以便它们以水平线显示。然后将整个无序列表设置为动画，向左移动1400px，进行滑动。我正在努力弄清楚如何在没有看起来很糟糕的情况下回到第一张幻灯片。这是我的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>

这是我的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");


        }
    }

});

每隔1秒调用一个幻灯片功能，该功能会向左侧激活列表。一旦显示最后一张幻灯片（在-2800px），第一张幻灯片需要再次显示，但是我希望它与其他幻灯片一样滑动，而不是仅仅显示。如果我将left属性设置为0px然后它就会出现，如果我删除并在常量循环中附加项目，那么动画看起来很难看。

Answer 1

当您使用动画滑动幻灯片时，使用一些动画将其动画回0会怎样？例如

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

使用一些动画从最后一张幻灯片动画到第一张幻灯片，看起来很正常，这就是许多jQuery滑块的工作方式。

Answer 2

我设法找到了解决方案，现在是：

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

一旦滑动功能到达列表的末尾，列表中的元素必须从队列的前面删除并添加到结尾。

自定义jQuery Slider，返回第一张幻灯片

2 个答案: