Question

我在我的网页上使用twitter bootstarp carousel。我需要在下一个箭头上显示鼠标上的下一个项目的标题。

HTML：

<div id="carousel-example-generic" class="carousel slide homecarousel" data-ride="carousel">
<!-- FIRST for slide -->
<div class="carousel-inner">
<div class="item active"  title="Adult">
slider 1
</div>
<div class="item"  title="Baby">
slider 2
</div>
<div class="item"  title="Ingredients">
slider 3
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev" ><img src="images/arrow_left.png" alt=""></a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next" ><img src="images/arrow_right.png" alt=""></a>

</div>
</div>

如何实现这一目标？任何帮助，将不胜感激。感谢。

Answer 1

这样的东西？：

$('.carousel-control').on('mouseover', function() {
    var titles = $('.carousel-inner .item').map(function(){ return this.title; });
    var currentIndex = $('.carousel .active').prevAll('.item').length;
    var title = titles[currentIndex + 1 > titles.length -1 ? 0 : currentIndex + 1];
    if ($(this).hasClass('left')) {
        title = titles[currentIndex - 1 < 0 ? titles.length - 1 : currentIndex - 1];
    }
    $(this).attr('title', title);
});

Fiddle

在上一个下一个悬停旋转木马上显示下一个项目标题

1 个答案: