Question

**编辑**这是我的jsfiddle：http://jsfiddle.net/t5vSA/4/

我想用导航创建自己的滑块。是的，我已经阅读了教程，因为有成千上万的教程，但我似乎无法掌握这个子弹导航的概念，所以我正在寻求帮助来理解它。我不想要一个插件的建议。

我的滑块已设置为宽度较大且溢出：隐藏，然后单击子弹将在单击幻灯片之前或之后为幻灯片提供正/负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();
  });
});

我对点击感到难过......我怎么会这样做？我想至少明白我在做什么，而不是使用另一个膨胀的滑块插件。

Answer 1

我测试了这个：

HTML：

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

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

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.
      var strID = $(this).text();
      if(strID.match(/Restore/i))
      {
        $('#slides .slide').animate({'margin-left': '0'});
      }
      else
      {
        $('#' + strID).animate({'margin-left': '-' + slideWidth}); 
      }
      e.preventDefault();
  });
});

如果这是你想要的？

Answer 2

您的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
        });
    });

编码滑块导航

2 个答案: