jQuery滑塊與製表滑塊動畫

嗨我想添加一些標籤添加更多的可用性，以jQuery滑塊。我設法根據HTML中有多少幻燈片添加一些標籤。現在，如果我點擊其中一個標籤（1,2,3,4），它將不得不將相關幻燈片的任何想法告訴我如何實現這個目標？jQuery滑塊與製表滑塊動畫

這是我到目前爲止有：

var slides = $('.slide'); 
var numberOfSlides = slides.length; 

function createTabs() { // creates tabs based on how many slides in HTML 
for (i = 1; i < numberOfSlides + 1; i++) { 
    $('#tabsstyle').append('<p>' + i + '</p>') 
} 
} 
createTabs(); 
$("#tabsstyle p").click(function() { 
// here the code to jump on the related slide 
})

讓我知道如果你需要更多的信息。感謝

添加HTML

<div id="pageContainer"> 
<!-- Slideshow HTML --> 
<div id="slideshow"> 

<div id="slidesContainer"> 

    <div id="one" class="slide"> 
    <h2></h2> 
    </div> 

    <div id="two" class="slide"> 
    <h2></h2> 
    </div> 

    <div id="three" class="slide"> 
    <h2></h2> 
    </div> 

    <div id="four" class="slide"> 
    <h2></h2> 
    </div> 


</div> 
<div id="tabsstyle"></div>

來源

2012-06-18 Alex

請張貼您的HTML，我們很難猜測'＃tabsstyle'和'p' ... –

它的更好，如果你可以改變從「一」幻燈片的ID，「兩化」像數值「 1' ， '2'。在這種情況下，我的答案將起作用。 –

我編輯了我的答案以滿足您的需求。請看看它是否有效。 –

根據你提供的資料，我認爲這可以幫助。雖然它可能不是100％正確的，但它可以給你一些想法。

$("#tabsstyle p").click(function() { 
    var index = $(this).index(); 
    $('#slidesContainer').find('.slide').hide(); 
    $('#tabsstyle').find('p').each(function(pos){ 
     var slideToShow = parseInt(pos) + 1; 
     if(pos == index){ 
      $('#slidesContainer').find('.slide:nth-child('+slideToShow+')').show(); 
     } 
    }); 
})

來源

2012-06-18 10:57:10

jQuery滑塊與製表滑塊動畫

回答

相關問題