編碼滑塊導航

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