0

ボタンをクリックするとコンテンツのセクションが横から表示され、次にクリックするとセクションが上から表示されるようにスライダーを作成しましたが、最初のいくつかのスライドは一貫しておらず、すべてのスライドが同じように（側面）。

誰かが見て、なぜこれが起こっているのかを知ることができれば、それは素晴らしいことです:

<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

4

2 に答える 2

1

最初に実行するとき、slidenum は 0 であるため、壊れています。

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

slideType$('#0-slide')は存在しないため未定義です。{direction:undefined}したがって、関数に渡そうとするとshow()、予期しない方向にデフォルト設定されると想定しています。

slideNum 変数を 1 に初期化してみてください。

于 2013-03-01T03:50:34.177 に答える
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 配置に問題があるため、それを調べてください。

于 2013-03-01T04:25:26.720 に答える