JavaScript Slider效果不一致

我已經創建了一個滑塊，以便當您單擊某個按鈕時，內容的一部分將從側面出現，下一個單擊該部分將從頂部開始，依此類推，但前幾個幻燈片不一致，所有滑動方式都相同（側面）。JavaScript Slider效果不一致

如果有人可以看看，找出爲什麼發生這種情況將是巨大的：

<div id="slider"> 

    <section class="horizontal-gallery"> 
     <img src="images/pekapeka/peka1.jpg" class="init-hidden" id="1-slide" rel="right"/> 
     <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/pekapeka/peka2.jpg" class="picture2 init-hidden" id="2-slide" rel="right" /> 
     <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/pekapeka/peka3.jpg" class="picture3 init-hidden" id="3-slide" rel="up" /> 
     <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>

JS：

var totalslides = '5'; 
var slidenum = 0; 
var slidenext = 0; 
var slideType = ''; 
$(function(){ 
    $('#gallery-next').data('counter', 0); 
    $('#gallery-next').click(function() { 
     slidenum = parseInt($('#gallery-next').data('counter')); 
     slidenext = slidenum+1 

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

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

     $('#'+slidenext+'-text').delay(1200).fadeIn(); 
     $('#'+slidenum+'-text').fadeOut(400); 

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

     console.log(slideType); 
    }); 
});

和鏈接：http://luvly.co.nz/space/te-horo-beach-house.html

來源

2013-03-01 Spade

你的鏈接會拋出404 – Brad 2013-03-01 03:38:33

@Brad對我有用 – 2013-03-01 03:40:49

它現在沒有......以前沒有 – Brad 2013-03-01 03:42:34

我拿了固定整個腳本的自由，轉載這裏：http://jsfiddle.net/samliew/waTDr/31/

var totalslides = 6; 
var slidenum = 0; 
var slidenext = 0; 

$(function() { 
    var $slider = $('#slider'); 
    var $slides = $slider.find('img'); 
    var $slideTexts = $slider.find('p'); 

    // hide all except first slide 
    $slides.hide().eq(0).show(); 
    $slideTexts.hide().eq(0).show(); 

    $('#gallery-next').data('counter', 0); 
    $('#gallery-next').click(function() { 

     slidenext = slidenum + 1; 
     if(slidenext >= totalslides) slidenext = 0; 

     var slideType = $slides.eq(slidenext).attr('rel'); 
     console.log(slidenum + ', ' + slidenext + ': ' + slideType); 

     // hide(slide) is a jQueryUI function, so ensure you include that lib 
     $slides.eq(slidenext).show('slide', { 
      direction: slideType 
     }, 1000); 
     $slides.eq(slidenum).delay(600).fadeOut(600); 

     $slideTexts.eq(slidenext).delay(1200).fadeIn(); 
     $slideTexts.eq(slidenum).fadeOut(400); 

     slidenum++; 
     if(slidenum >= totalslides) slidenum = 0; 

     console.log(slidenum + ', ' + slidenext); 
    }); 
});

此外，還有一些錯誤文本的的CSS定位6，你可能想看看。

來源

2013-03-01 04:25:26

這是完美的，你已經完成了我的一週。非常感謝！！ – Spade 2013-03-03 21:13:43

其打破，因爲該事件第一次執行時，slidenum爲0.因此，當它試圖找到

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

slideType未定義，因爲$('#0-slide')不存在。所以當你試圖通過{direction:undefined}到你的show()功能，我假設它默認你不指望的某個方向。

嘗試初始化你slideNum變量爲1

來源

2013-03-01 03:50:34 Brad

JavaScript Slider效果不一致

回答

相關問題