0

我有一个滑块，其中一些面板可以使用箭头滑入和滑出。下一个箭头的功能是这样的：

var element = $('.projects .popup.active'),    
    next = $('.slider.projects #next'),
    prev = $('.slider.projects #prev'),
    oleft = element.offset().left,
    oright = ($(window).width() - (element.offset().left + element.outerWidth()));

next.unbind("click").on('click', function(e){   
        e.preventDefault();
        $(document).scrollTop(0);
        $('.projects .popup').not(element).removeClass('active');
        element.next('.popup').addClass('active');
        element.prevAll('.popup').css({zIndex: -1});
        element.prevAll('.popup').css({left:'-100%', margin: 0});
        element.nextAll('.popup').css({left:'100%', margin: 0});

        element.removeClass('active');
        element = $('.projects .popup.active');

        element.animate({
            left: '50%',
            marginLeft: -352.5
        },500);
        element.next('.popup').animate({
            left: $(window).width() - (oright / 2),
            marginLeft: 0
        },500);
        element.prev('.popup').animate({
            left: - elemWidth + (oleft / 2),
            marginLeft:0
        }, 500);
        checkarrow();
    });

我也希望在单击下一个或上一个可见面板时，触发下一个和上一个功能。所以，对于下一个面板，我这样做了：

element.next('.popup').on('click', function(e){
    next.trigger('click');
});

这第一次工作正常，但第二次，点击只适用于第一次

element.next('popup')

第一次被点击。类活动更新正常，但点击在下一个面板上不起作用。我想不出解决办法。

这是一个小提琴http://jsfiddle.net/3sSz2/

任何帮助将非常感激。提前致谢

更新

感谢 f00bar，我设法让下一个盒子顺利滑动。以前的虽然没有按预期工作。问题应该来自第 100 行，可能是这个小提琴http://jsfiddle.net/3sSz2/11/中的第 103 行。

单击下一个框（右侧的那个）或下一个箭头时，下一张幻灯片滑入，然后下一张幻灯片再次执行相同的操作。单击中央活动幻灯片时，不会发生任何事情。单击上一个箭头或上一个框（左侧的那个）时，左侧的框应滑动到中心，而中央框应向右移动。

请帮忙，我知道我快到了。谢谢

4

1 回答 1

1

最后，这就是我最终的结果，我希望它有助于考虑我花在写这个小提琴上的时间 Oo

我在 .slider 元素上附加了点击处理程序以避免多个侦听器。这里是处理程序。

$('.slider').click(function (e) {
    var $slider = $(this),
        data = $slider.data('slider'),
        $slides = $slider.find('.popup'),
        $first = $slides.eq(0),
        $last = $slides.last(),
        $activeItem = $slides.filter('.active'),
        $next = $('.popup-nav.next', this),
        $prev = $('.popup-nav.prev', this),
        $t = $(e.target).closest('.popup, .popup-nav'),
        $nextItem = $activeItem.next('.popup'),
        $prevItem = $activeItem.prev('.popup'),
        way = (
            // Is the target be the next item in the DOM or the 'next arrow'
            ($t.is('.popup-nav.next') || $t.is($nextItem)) ? -1 :
            // Is the target be the next item in the DOM or the 'prev arrow'
            ($t.is('.popup-nav.prev') || $t.is($nextItem)) ? 1 : 0
        );

    switch (way) {
    // previous
    case 1:
        // if the active slide is the last project
        if ($activeItem.is($first)) {
            $first.before($last.css({
                left: +($first.css('left').replace('px', '')) - data.width
            }));
        }
        $activeItem.removeClass('active').prev().addClass('active');
        play.call($slides, {
            way: way,
            width: data.width
        });
        break;
    // next
    case -1:
        // if the active slide is the last project
        if ($activeItem.is($last)) {
            $last.after($first.css({
                left: +($last.css('left').replace('px', '')) + data.width
            }));
        }
        $activeItem.removeClass('active').next().addClass('active');
        play.call($slides, {
            way: way,
            width: data.width
        });
        break;
    }
});
于 2013-10-21T23:43:28.720 回答