Question

所以，我花了最后8个小时试图建立自己的旋转木马，我是jquery的新手。所以我在第二张幻灯片上有一个错误。

如果您看到我点击第二个下一个，则会显示上一个按钮，但它只出现在第二个点击中。

这是我的代码：

$(document).ready(function() {
    var sliderWidth     = 300; // Give the size of the window
    var sliderV         = $('#slide-wrap-vertical'); // Assigns the container that has all the sectiosn that will be scrolled vertically
    var sliderCount     = $('#slide-wrap-vertical').children().size(); // Gets the size of the vertical slider    
    var sliderHeight    = sliderCount * sliderWidth; // Takes the height of the slider

    $('#slide-wrap-vertical').css('height', sliderHeight); // assigns the height
    //$('a.temp').text(sliderHeight);    

    showHideDirection();

    $('a.nav-top-prev').on('click',function () {

        $('#slide-wrap-vertical > div').animate({
            'top': '+=' + sliderWidth + 'px'
        }, 500);
        showHideDirection();

    });

    $('a.nav-top-next').on('click', function () {
        $('#slide-wrap-vertical > div').animate({
            'top': '-=' + sliderWidth + 'px'
        }, 500);
        showHideDirection();

    });


    function showHideDirection() {

        $(sliderV).children().each(function(){ // Checks all the children of the vertical carousel          

            if ($(this).position().top == 0) {
                var index = $(this).index();

                $('a.nav-top-prev').toggle(index!==0);
                $('a.nav-top-next').toggle(index!==sliderCount-1);
            }

        });
    }


});

如果你想看到功能

，我也添加了jsfiddle

http://jsfiddle.net/Dethdoll/WkFVs/12/

Answer 1

animate调用将与其后面的代码异步，因此后续的代码行将在动画完成之前开始执行。因此showHideDirection仍然会在您点击一次之后立即将您的位置视为第一张幻灯片。只有在动画完成后才需要调用它。

执行此操作的方法是将showHideDirection指定为animate()的回调参数，而不是将其作为后续代码行调用。 .animate() documentation将此complete参数命名为

$('a.nav-top-next').on('click', function () { $('#slide-wrap-vertical > div').animate({ 'top': '-=' + sliderWidth + 'px' }, 500, showHideDirection); });

note ：文档列出complete作为第4个参数，但作为第3个命名参数（easing）需要字符串值，如果传入函数名称相反，在那个地方，jQuery会意识到你正在跳过easing参数，并将其解释为complete参数。

更多说明：

jQuery初学者做得好。一些指示：

一种广泛使用的惯例是预先包含保存jQuery对象的变量名使用$，例如：var $sliderV = $('#slide-wrap-vertical');这会添加语义/帮助跟踪什么是什么，特别是对于函数参数名称，它表明你期待传递的jQuery对象在

您在最外层（非全局）范围内设置sliderV，因此它将在您的代码中的任何位置可用，但您重新获得jQuery对象2次而不是仅重新使用sliderV 。这是javascript引擎的额外工作。在这种情况下，差异将是可以忽略的，但是当你继续使用更大的jQuery项目时，你需要更加吝啬，所以最好从现在的好habbits开始。

跟踪哪个幻灯片“打开”的方法依赖于界面的不可靠伪像（在垂直位置0处找到幻灯片）。如果您决定在幻灯片框架周围添加一个缓冲区顶部，那该怎么办？现在，当它结算时，任何幻灯片都不会为0。一种替代方法是在代码开头将索引变量设置为0，然后在用户向前或向后导航时递增/递减索引，在单击导航时立即更改此值，并根据索引的值隐藏prev / next按钮（例如，如果index为0，则隐藏prev）。现在，您也不依赖于完成测试的动画。

旋转木马第二张幻灯片上的错误

1 个答案: