[英]show next item title on previous next hover carousel
我在網頁中使用twitter bootstarp輪播。 我需要在鼠標懸停在下一個箭頭上時顯示下一個項目的標題。
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>
如何實現呢? 任何幫助,將不勝感激。 謝謝。
像這樣嗎 :
$('.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);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.