Question

我创建了一个滑块，这样当您点击一个按钮时，一部分内容将从侧面出现，下一次单击该部分将从顶部开始，依此类推，但前几张幻灯片不一致，所有都以同样的方式滑动（侧面）。

如果有人可以看看，并找出为什么会发生这种情况，那就太好了：

<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

它被破坏了，因为第一次执行的东西，slidenum是0.所以当它试图找到

时

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

slideType未定义，因为$('#0-slide')不存在。因此，当您尝试将{direction:undefined}传递给show()函数时，我假设它默认为某种您不期望的方向。

尝试将slideNum变量初始化为1.

Answer 2

我冒昧地修复了整个剧本，转载于此：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定位有问题，你可能想看一下。

JavaScript幻灯片效果不一致

2 个答案: