多方向滑块

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;