1

所以，在过去的 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/

4

1 回答 1

3

The animate call will be asynchronous with the code that follows it, so the subsequent lines of code will start executing before the animation is complete. So showHideDirection still sees your position as being at the first slide, immediately after you've clicked it only once. You need to have that called only after the animation is complete.

The way to do this is to assign showHideDirection as the callback argument of animate() rather than calling it as a subsequent line of code. The .animate() documentation names this the complete parameter:

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

note: the documentation lists complete as the 4th paramter, but as the 3rd named parameter (easing) requires a string value, if you pass in a function name instead in that place, jQuery will realize that you are skipping the easing parameter, and interpret it as the complete parameter.

more notes:

Well done for a jQuery beginner. A few pointers:

  • A widely used convention is to prepend variable-names that hold jQuery objects
    with a $, e.g.: var $sliderV = $('#slide-wrap-vertical');This adds semantics / helps to keep track of what's what, particularly for function argument-names it shows that you are expecting a jQuery object passed in

  • You set up sliderV at the outermost (non-global) scope, so it will be available anywhere in your code, but you recapture the jQuery object 2 more times instead of just re-using sliderV. This is extra work for the javascript engine. In this case the difference will be neglegible, but as you get on with bigger jQuery projects, you'll need to be stingier, so better start with the good habbits now.

  • Your method of tracking which slide is "on" relies on an un-reliable artifact of the interface (finding a slide at vertical-position of 0). What if you, say, decide to add a buffer around the slide frame by adding a margin-top to it? Now no slide will ever be at 0 when it settles. One alternative would be to set up an index variable as 0 at the beginning of your code, then increment/decrement the index as the user navigates forward or back, change this value immediately when a nav is clicked, and hide the prev/next button depending on the value of the index (e.g. hide prev if index is 0). Now you're not dependent on the animation completing for your test, either.

于 2013-11-07T21:39:18.133 回答