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 回答