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将始终存在，因此始终向右转移。

修正：

使用 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" />

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

更好的是，不要让它成为一个恒定值。添加另一张幻灯片时，您始终需要编辑代码。所以动态地得到它：

var totalslides = $('#slider').children().length;

多方向滑块

2 个答案: