2

如果“li.item:first”或“li.item:last”具有“活动”类，我如何隐藏上一个/下一个控制器

<ul class="carousel">
    <li class="item active"><img src="ab.jpg" /></li>
    <li class="item"><img src="cd.jpg" /></li>
    <li class="item"><img src="ef.jpg" /></li>
    <li class="item"><img src="gh.jpg" /></li>
</ul>

<!-- Controls -->
<a class="left carousel-control" href="#carousel" data-slide="prev">
    <span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel" data-slide="next">
    <span class="icon-next"></span>
</a>
4

6 回答 6

4

你可以这样做：

$(".right").click(function() {
  if($(".active").is(":last-child"))
  {
    $(this).hide();
    $(".left").show();
  }
}

然后是“先前”控制的相反（左右交换）。

于 2013-09-07T12:28:27.023 回答
1

这样的事情应该这样做：

if($('li.item:first').hasClass('active')) {
   $('a.carousel-control.left').hide();
}else {
   $('a.carousel-control.left').show();
}

if($('li.item:last').hasClass('active')) {
   $('a.carousel-control.right').hide();
}else {
   $('a.carousel-control.right').show();
}
于 2013-09-07T12:28:09.607 回答
1 
if $('li.item:first').hasClass('active') { $('a.left.carousel-control').toggle(); }
if $('li.item:last').hasClass('active') { $('a.right.carousel-control').toggle(); }

不是一个完整的解决方案，但应该让你开始。只需使用您的点击处理程序中的那些。

于 2013-09-07T12:34:59.927 回答
1

这里的好答案是另一种解决方案，我稍微更改了上面的代码并删除了重复。

小提琴演示

css

.carousel .item
{
    display: none;
}
.carousel .item.active
{
    display: block;
}

jQuery

$(function()
 {
    $('.carousel-control').click(function(event) 
    {
        event.preventDefault();

        var $this               = $(this)
        var direction           = $this.data('slide');
        var $items              = $('.carousel .item');
        var $activeItem         = $items.filter('.active');
        var $nextItem           = $activeItem[direction]();
        var hasItem             = $nextItem.length !== 0;
        var shouldHideControl   = $nextItem.is(':first-child') || $nextItem.is(':last-child');
        var $controls           = $('.carousel-control');

        $controls.show()

        if(hasItem)
        {
           $items.removeClass('active');
           $nextItem.addClass('active');
        }

        if(shouldHideControl)
        {
            $this.hide();
        }

    }); 
});
于 2013-09-07T13:55:14.027 回答
0

每次活动班级更改时，您都需要执行此操作，即每次轮播更改幻灯片时。

// Show both by default
$(".left, .right").show();
// If the first is selected, hide the left
if($("li.item:first").hasClass("active")) $(".left").hide();
// If the last is selected, hide the right
if($("li.item:last").hasClass("active")) $(".right").hide();
于 2013-09-07T12:28:29.837 回答
0

或者，您可以首先识别活动li对象，然后检查它是当前的第一个还是最后一个ul：

$('.left.carousel-control').toggle(!$('li.active').is(':first-child'));
$('.right.carousel-control').toggle(!$('li.active').is(':last-child'));

http://jsfiddle.net/949SS/4/

于 2013-09-07T13:01:24.440 回答