0

こんにちは、jQuery スライダーの使いやすさを向上させるために、いくつかのタブを追加しようとしています。HTML にあるスライドの数に基づいて、いくつかのタブを追加することができました。ここで、これらのタブ (1、2、3、4) のいずれかをクリックすると、関連するスライドに移動する必要があります。これを実現する方法についてのアイデアを教えてください。

これは私がこれまでに持っているものです:

 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>
4

1 に答える 1

0

あなたが提供した情報に基づいて、これは役立つと思います。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-18T10:57:10.520 に答える