多方向滑塊

Question

我已經設置了一個滑塊，以便每次單擊下一個按鈕時，圖像將從不同的方向滑入。例如; 第一次點擊從頂部滑動 第二次從左側 第三次從頂部 第四次從左側e.t.c e.t.c.

到目前爲止，我的前三個工作正常，但第四次點擊後，圖像只能從側面滑入。

這裏是我迄今爲止

<script type="text/javascript"> 
     var totalslides = '6'; 
     var slidenum = 0; 
     var slidenext = 0; 
     var slideType = ''; 
     $(function(){ 
      $('#gallery-next').data('counter',1); 
      $('#gallery-next').click(function() { 
       slidenum = parseInt($('#gallery-next').data('counter')); 
       slidenext = slidenum+1 
       slideType = $('#'+slidenum+'-slide').attr('class') 
       slideType = slideType.split('-')[0] 

       if (slideType =='') slideType='up'; 
       else slideType = 'right'; 
       //alert('Next slideType is: ' + slideType) 
       //hide(slide) is a jQueryUI function, so ensure you include that lib 
       $('#'+slidenext+'-slide').delay(605).show('slide',{direction:slideType}, 1000); 
       $('#'+slidenum+'-slide').fadeOut(600); 

       $('#'+slidenext+'-text').delay(731).fadeIn(1000); 
       $('#'+slidenum+'-text').fadeOut(600); 

       slidenum = slidenum % totalslides + 1; 
       $('#gallery-next').data('counter',slidenum); 

       console.log(slideType); 
      }); 
     }); 
    </script> 

<div id="slider"> 

      <section class="horizontal-gallery"> 
       <img src="images/waikanae/crafar_h1.jpg" class="" id="1-slide"/> 
       <p id="1-text" class="horizontal-gallery-text">This is the first image in the gallery </p> 
      </section> 

      <section class="vertical-gallery"> 
       <img src="images/waikanae/crafar_v1.jpg" class="picture2 init-hidden" id="2-slide"/> 
       <p id="2-text" class="vertical-gallery-text init-hidden">This is the second image in the gallery, it should be sliding down</p> 
      </section> 

      <section class="horizontal-gallery"> 
       <img src="images/waikanae/crafar_h1.jpg" class="picture3 init-hidden" id="3-slide"/> 
       <p id="3-text" class="horizontal-gallery-text text-3 init-hidden">This is the third image in the gallery it should be sliding in from the side </p> 
      </section> 

      <section class="vertical-gallery"> 
       <img src="images/waikanae/crafar_v1.jpg" class="picture4 init-hidden" id="4-slide"/> 
       <p id="4-text" class="vertical-gallery-text text-4 init-hidden">This is the fourth image in the gallery, it should be sliding down </p> 
      </section> 

http://luvly.co.nz/space/test/waikanae-beach-house.html

如果有人能弄清楚爲什麼它不能正常工作，將不勝感激！ 乾杯

Answer 1

if (slideType =='') slideType='up'; 
else slideType = 'right'; 

這裏的邏輯不對。 slideType只會在第一次爲空，那麼slideType將永遠存在，因此總是正確轉換。

修復：

使用相對屬性。

更換下一行：

slideType=$('#'+slidenum+'-slide').attr('class') 
slideType=slideType.split('-')[0] 

if (slideType=='') slideType='up'; 
else slideType='right'; 

用下面的代碼：

slideType = $('#'+slidenum+'-slide').attr('rel') 

然後用rel屬性指定您是否希望它是 '正確' 或 '向上'：

<img src="images/waikanae/crafar_h1.jpg" class="" id="1-slide" rel="up" /> 

... 

<img src="images/waikanae/crafar_h1.jpg" class="" id="2-slide" rel="right" /> 

Answer 2

你的slideType首先返回空，然後從那裏返回非空。

因此，而不是：

if (slideType =='') slideType='up'; else slideType = 'right'; 

做到這一點，例如：

var c = 0; //counter 

$('#gallery-next').click(function() { 
    // your code... 
    slideType = c % 2 === 0 ? 'up' : 'right'; 
    c++; 
    // your code... 
}); 

我知道，你有一個計數器保持如：

slidenum = parseInt($('#gallery-next').data('counter')); 

我不看到任何理由保持櫃檯內的jQuery data對象。你應該使用一個簡單的變量，就像上面所示。

此外，值totalslides是一個字符串;它應該是一個數：

var totalslides = '6'; //should be 6 

越好，不要使它成爲一個恆定值BEC​​。當您添加另一張幻燈片時，您將始終需要編輯代碼。所以把它動態：

var totalslides = $('#slider').children().length;