1

次のボタンがクリックされるたびに画像が別の方向からスライドするようにスライダーを設定しました。例えば; 最初に上からスライドをクリックします左から2番目左から上から3番目など

これまでのところ、最初の3つは正しく機能していますが、4回目のクリックの後、画像は横からのみスライドインします。

これが私がこれまでに持っているものです

<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

なぜそれが正しく機能していないのか誰かが理解できれば、それは大いにありがたいです！乾杯

4

2 に答える 2

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

論理はここでは正しくありません。slideType初めて null になるだけで、その後slideTypeは常に存在するため、常に右に遷移します。

修理：

rel属性を使用します。

次の行を置き換えます。

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" />
于 2013-02-25T00:38:03.647 に答える
1

あなたの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'));

dataカウンターを jQueryオブジェクト内に保持する理由がわかりません。上記のように単純な変数を使用する必要があります。

また、 の値totalslidesは文字列です。それは数字でなければなりません：

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

ベター、定数値にしないでください。別のスライドを追加するときは、常にコードを編集する必要があります。したがって、動的に取得します。

var totalslides = $('#slider').children().length;
于 2013-02-25T00:52:15.347 に答える