2012-07-18 153 views
0

這是滑塊導航的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。

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

回答

1

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

http://jsfiddle.net/vrRfu/

我誤解了問題?

enter image description here

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

+0

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

+0

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

+0

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

0

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

+0

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

+0

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

0

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

希望有所幫助。