0

** 編集 ** ここに私の jsfiddle があります: http://jsfiddle.net/t5vSA/4/

ナビゲーション付きの独自のスライダーを作成したい。はい、何千ものチュートリアルがあるので読みましたが、この箇条書きナビゲーションの概念を理解できないようです。理解するために助けを求めています。プラグインの提案はしたくありません。

私のスライダーは、overflow:hidden で幅が広くなるように設定されており、箇条書きをクリックすると、クリックmargin-leftしたスライドの前または後にスライドに正/負が表示されます。

これはこれまでの私のコードです。

<div id="slides" width="500px;">
  <div class="slide" id="0" style="width:500px;">
    <p>Content</p>
  </div>
  <div class="slide" id="1" style="width:500px;">
    <p>Content</p>
  </div>
  <div class="slide" id="2" style="width:500px;">
    <p>Content</p>
  </div>
</div>

<ul id="menu">
  <li>0</li>
  <li>1</li>
  <li>2</li>
</ul>

CSS

#wrapper {
overflow:hidden
}

#slides {
overflow:hidden;
width:500px;
height:500px;
}

.slide {
display:inline-block;
height:500px;
float:left;
}

JS

$(document).ready(function(){
  var numSlides = $('#slides .slide').length;
  var slideWidth = $('#slides .slide').width();
  var totalWidth = slideWidth * numSlides;
  // Assign total width of slides
  $('#slides').css('width', totalWidth);
 // Assign width of each slide
  $('#slides .slide').css('width', slideWidth);

// Loop through slides?
  $('#slides .slide').each(function(i) {
  });

// On clicking the navigation
  $('ul#menu li').click(function(e) {
      // Does the sliding I want but doesn't really work.
      $('#slides .slide').prev().animate({'margin-left': '-' + slideWidth}); 
      e.PreventDefault();
  });
});

私はクリックに困惑しています...どうすればこれを行うことができますか? 別の肥大化したスライダー プラグインを使用する代わりに、少なくとも自分が何をしているのかを理解したいと思います。

4

2 に答える 2

0

li タグにいくつかの変更があります。以下のリンクを確認してください

http://jsfiddle.net/nPbkX/

HTML

<ul id="menu">
        <li id="0" class='active'><a href="#">0</a>
        </li>
        <li id="1"><a href="#">1</a>
        </li>
        <li id="2"><a href="#">2</a>
        </li>
    </ul>

JS

 $('ul#menu li').click(function (e) {

        var id = $(this).attr('id');
        // Does the sliding I want but doesn't really work.
        $('#slides #' + id).prev().animate({
            'margin-left': '-' + slideWidth
        });
    });
于 2013-10-24T11:38:33.903 に答える