Javascript 编码滑块导航

**编辑**这是我的JSFIDLE：

我想创建自己的带有导航的滑块。是的，我读过成千上万的教程，但我似乎无法理解这个子弹导航的概念，所以我请求帮助理解它。我不想要一个插件的建议

“我的滑块”的设置使其具有较大的宽度，并带有溢出：隐藏，然后单击该项目符号将在单击的幻灯片之前或之后为幻灯片留出正/负

边距

这是到目前为止我的代码

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

JS

我被点击难住了…我该怎么做呢？我想至少了解我在做什么，而不是使用另一个臃肿的滑块插件。
我已经测试过：

HTML:

如果这是您想要的？
您的li标签有一些更改，请检查下面的链接


HTML

如果添加jquery UI，则存在一个幻灯片功能，可用于幻灯片内容。
#wrapper {
overflow:hidden
}

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

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

$(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();
  });
});

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

$(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();
  });
});

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

 $('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
        });
    });