JavaScript slider 效果不一致

Question

我创建了一个 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

Answer 1

我冒昧修复了整个脚本，复制如下: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);
    });
});

此外，text-6 的 CSS 定位有问题，您可能需要检查一下。