jQuery的內容滑塊滑動

這是滑塊導航的HTML部分：jQuery的內容滑塊滑動

<div id="button"> 
    <a class="button1 active" rel="1" href="#"></a> 
    <a class="button2" rel="2" href="#"></a> 
    <a class="button3" rel="3" href="#"></a> 
</div>

這是滑塊的完整的jQuery代碼：

$(document).ready(function(){ 
    $('#button a').click(function(){ 
    var integer = $(this).attr('rel'); 
    /*----- Width of div mystuff (here 160) ------ */ 
    $('#myslide .cover').animate({left:-160*(parseInt(integer)-1)}) 
    $('#button a').each(function(){ 
     $(this).removeClass('active'); 
     if($(this).hasClass('button'+integer)){ 
     $(this).addClass('active') 
     } 
    }); 
    }); 
});

我建立一個內容滑塊分配在大學時，我無法遵循這些代碼。

你可以找到這個滑塊的完整代碼here。

我們的3個環節有值1,2和3的jQuery的這條線計算多少會滑塊滑動相對屬性：

$('#myslide .cover').animate({left:-160*(parseInt(integer)-1)})

所以，如果變量整數1這將是-160*(1-1)=0 - 中滑塊不會移動如果它的2結果將是-160，它將向右移動160px。如果它的3它將向右移動320px。

此代碼如何將幻燈片向左移動？如果您在頁面上測試演示程序，它會起作用，但我不明白如何？有人可以向我解釋嗎？

來源

2012-07-18 Damir

負的左值將導致元素移動到0位置的左側。當您從0到-160設置動畫時，它會向左移動。

http://jsfiddle.net/vrRfu/

我誤解了問題？

enter image description here

乘以-160結果爲負左位置，使元件的正整數向左移動。

來源

2012-07-18 21:49:23

我不明白他們是如何移動到左側，如果整數變量可以在任何時候只有1,2或3？ – Damir 2012-07-19 08:11:27

如果整數是1，則左邊的位置將是0.如果整數是2，則左邊的位置將是-160。如果整數是3，則左邊的位置將是-320。那些負面的左邊位置會導致它離開它的開始位置。 – 2012-07-19 14:22:46

由於您只是在位置上進行水平變更，因此以下鏈接中的圖表顯示了發生的情況。 http://en.wikipedia.org/wiki/File:Number-line.gif – 2012-07-19 14:25:34

這張幻燈片的祕訣是''，因爲你必須把三個段落放在同一行中，但是讓div的大小隻有一個，當你改變'overflow'屬性來隱藏所有的東西是出於意志消失，所以它就像一個窗口，只能讓你看到面前的東西，最後用'.animate（）'方法，你可以將事物移動到「窗口」的前面

來源

2012-07-18 22:03:09

我明白如何使用溢出顯示div：隱藏但我不明白的是他們如何移動到左側，如果整數變量可以在任何時候只有1,2或3？ – Damir 2012-07-19 08:11:11

你正在減去一個並將它乘以圓柱寬度，所以當integer = 1 left = -160 *（1-1）= 0時，所以在第一個位置沒有向左移動，integer = 2 left = - 160（2-1）= 160，將整個160段像素向左移動，使動畫更改爲第二段。 – 2012-07-19 15:52:40

如果你的整數是1，你將它移動到左邊，那麼你的公式就是（-160）* - 1-1，這會給你-320（將滑塊向左移動）。如果它是肯定的，你會乘以一個正數，將滑塊向正確的方向移動。

希望有所幫助。

來源

2012-07-19 15:53:14

jQuery的內容滑塊滑動

回答

相關問題