1

我设置了一个滑块，这样每次单击下一个按钮时，图像都会从不同的方向滑入。例如; 第一次单击从顶部滑动第二次从左上到第三从左上等等等

到目前为止，我的前三个工作正常，但在第四次单击之后，图像只能从侧面滑入。

这是我到目前为止所拥有的

<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只会在第一次为空，然后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'));

我看不出有任何理由将计数器保留在 jQuerydata对象中。您应该使用如上所示的简单变量。

此外， 的值totalslides是一个字符串；它应该是一个数字：

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

更好的是，不要让它成为一个常数值。添加另一张幻灯片时，您总是需要编辑代码。所以动态获取它：

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