Question

我是一个jQuery newb，我一直在尝试为我正在开发的页面创建一个自定义幻灯片小部件。我已经能够使所有的基本位工作（自动播放，暂停，字幕），但我已经遇到了分页的障碍（允许你选择幻灯片）。无论出于何种原因，一旦我尝试选择幻灯片，图像和标题就会消失。没有错误，只是拒绝切换图像或标题。 Heres'代码：

这段代码启动幻灯片并控制它

$(document).ready(function () {
    var speed = 2000;                            
    var state = 1;                                          

       $('#gallery li, #caption li').css('position','absolute');         

       $('#gallery li:first, #caption li:first').addClass('visible');             

       var timer = setInterval('autoSlideshow(-1)', speed);             

    $('#controls a.playpause').toggle(
        function () {
            $(this).css('background-image','url(images/play.png)');  
            clearInterval(timer);
            state = 0;
            return false;  
        },
        function() {        
            $(this).css('background-image','url(images/pause.png)');
            timer = setInterval('autoSlideshow(-1)', speed);
            state = 1;
            return false; 
        }
    );           

    $('#controls a.pagination').click( function(){
        var slide = $(this).index();

        slide-=1;
        clearInterval(timer);   
        timer = setInterval(function(){autoSlideshow(slide);}, speed);


    });


    $('#gallery, #caption').hover(                               
        function() {
            if(state == 1)  
                clearInterval(timer); 
        },   
        function() {
            if (state == 1)  
                timer = setInterval('autoSlideshow(-1)', speed); 
        }  
    );


});

此位可以淡入淡出幻灯片

    function autoSlideshow(mode) {
    var currentImage = $('#gallery li.visible');                                   
    var currentCaption = $('#caption li.visible');

    if(mode == -1){
        var nextImage = currentImage.next().length ? currentImage.next() :        
                    currentImage.siblings(':first');        
        var nextCaption = currentCaption.next().length ? currentCaption.next() :          //Determine the next slide
                    currentCaption.siblings(':first');
    }
    else{
        var nextImage = $('#gallery li:eq(mode)');   //I'm pretty sure these two lines are the problem
        var nextCaption = $('#caption li:eq(mode)'); //
    }  

    currentImage.fadeOut(250).removeClass('visible');
    nextImage.fadeIn(250).addClass('visible');  
    currentCaption.fadeOut(250).removeClass('visible');
    nextCaption.fadeIn(250).addClass('visible');


}

你们可以给予任何帮助，我们将不胜感激。

沫

Answer 1

string constant vs variable ....试试这个：

    var nextImage = $('#gallery li:eq('+mode+')'); 
    var nextCaption = $('#caption li:eq('+mode+')');

这应该将模式转换为字符串，因此eq将获得一个数字而不是单词“mode”。

（注意：我只看了你突出显示的那一行，我没有检查或测试程序的其余部分，可能还有其他问题。）

编辑以回答以下问题

你只是侧身看着它。记住'blah blah blah'是一个字符串常量。它没有评估。它保持静止，不会改变。

另一种看待它的方法是记住编译器和jQuery函数之间的区别。这是编译器在我的语句中看到的内容

将字符串常量'#caption li:eq('附加到变量模式的值（隐式转换），然后追加到字符串常量')'将结果传递给jQuery函数。

因此，将使用以下字符串参数调用jQuery函数（如果mode的值为9）：

'#caption li:eq(9)'

在您的代码中，使用以下字符串参数

调用jQuery

'#caption li:eq(mode)'

这是否说清楚了？

jQuery幻灯片分页问题

1 个答案: