Question

我有一个带有不同列表的旋转木马。然后我有一个按钮。当我点击按钮时，旋转木马向左移动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));
});

Answer 1

我修改了你的滑块，为两个按钮使用了一个单击处理程序，并使用jQuery sectionIndex将buttons存储在父元素data('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;
    });
});

DEMO：http://jsfiddle.net/kwdMP/3/

在旋转木马中获取ul的索引

1 个答案: