0

我有一个带有不同列表的轮播。接下来我有一个按钮。当我单击按钮时，轮播向左移动 200 像素。比你可以看到的其他图像。但我对这个定制的旋转木马有疑问。

我把脚本放在 Jsfiddle 上：http: //jsfiddle.net/kwdMP/2/

我想获得轮播的 .index 。但轮播不适用于 .index。谁能帮我修好这个旋转木马？谢谢各位帮忙！

这是我的 js 代码：

$(document).ready(function() {
    // Add width en height to the container - wrapper
    var ul = $('.list-thumbnails');
    var lengthUL = $('.list-thumbnails').length + 1;
    var containerWidth = $(ul).outerWidth() * lengthUL;

    $('.container-list-thumbnails').css({
        width: containerWidth
    });


    // Buttons for next and previous
    $('.container-thumbnails').append('<div class="buttons"><a href="#" title="Ga naar de vorige" class="previous">Vorige</a><a href="#" title="Ga naar de volgende" class="next">Volgende</a></div>')
    var buttonPrevious = $('.container-thumbnails .previous');
    var buttonNext = $('.container-thumbnails .next');

    buttonNext.click(function(e) {
        e.preventDefault();

        if (this.ignoreButtons) {
            return;
        }

        var section = $('.container-list-thumbnails');
        var sectionIndex = section.index();

        var x = -300 * (sectionIndex + 1);

        console.log(x);

        this.ignoreButtons = true;

        $('.container-list-thumbnails').animate({
            left: x,
        }, function() {
            this.ignoreButtons = false;
        }.bind(this));
    }.bind(this));
});
​
4

1 回答 1

1

我修改了您的滑块以对两个按钮使用一键式处理程序，并使用 jQuery存储sectionIndex在父元素中。您需要进一步改进它，使其不能低于零或超过拇指列表的长度buttonsdata('sectionIndex')

$('.buttons').data('sectionIndex', 0);
var section = $('.container-list-thumbnails');
$('.buttons a').click(function(e) {
    e.preventDefault();
    var isNext = $(this).is('.next');
    var $parent = $(this).parent();

    //if (this.ignoreButtons) {
        //return;
    //}
    var currIndex = $parent.data('sectionIndex');

    var sectionIndex = isNext ? currIndex + 1 : currIndex - 1;

    $parent.data('sectionIndex', sectionIndex);

    var x = -300 * sectionIndex;

    console.log(x);

    // this.ignoreButtons = true;
    $('.container-list-thumbnails').animate({
        left: x,
    }, function() {
        this.ignoreButtons = false;
    });
});

演示：http: //jsfiddle.net/kwdMP/3/

于 2012-11-24T14:10:14.050 回答