0

** 编辑 ** 这是我的 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();
  });
});

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

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 回答
0

我已经对此进行了测试：

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

如果这是你想要的？

于 2013-10-24T11:37:13.410 回答