编码滑块导航

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

有一个在您L1标签的一些变化，请点击以下链接

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