JQuery слайд-шоу проблема с нумерацией страниц - PullRequest
Новая
       1

JQuery слайд-шоу проблема с нумерацией страниц

3 голосов
/ 06 августа 2010

Я новичок в jQuery и пытаюсь создать собственный виджет слайд-шоу для разрабатываемой страницы. Мне удалось заставить работать все основные элементы (автозапуск, пауза, подписи), но я столкнулся с препятствием с нумерацией страниц (позволяет выбрать слайд) По какой-то причине, когда я пытаюсь выбрать слайд, изображение исчезает. Не выдается никаких ошибок, он просто отказывается переключать изображение или подпись. Вот код:

Этот бит кода запускает слайд-шоу и управляет им 

$(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');


}

Буду признателен за любую помощь, которую вы, ребята, можете дать.

Мо

1 Ответ

0 голосов
/ 06 августа 2010

строковая константа против переменной .... попробуйте это: 

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

Это должно преобразовать режим в строку, таким образом, eq получит число вместо слова "режим".

(Примечание: я только что посмотрел на выделенную вами строку, я не проверял и не тестировал остальную часть программы, могут быть другие проблемы.)

изменить, чтобы ответить на вопросниже

Вы просто смотрите на него вбок.Помните, что «бла-бла-бла» является строковой константой.Это не оценивается.Он остается статичным и не изменяется.

Еще один способ взглянуть на это - запомнить разницу между компилятором и функцией jQuery.Это то, что компилятор видит в моем утверждении

Возьмите строковую константу '#caption li:eq(', добавьте к ней значение режима переменной (неявное преобразование), затем добавьте к этой строковой константе ')' передачу результата вФункция jQuery.

Таким образом, функция jQuery будет вызываться со следующим строковым параметром (если mode имеет значение 9):

'#caption li:eq(9)'

В вашем коде jQuery былвызывается со следующим строковым параметром

'#caption li:eq(mode)'

Это ясно?

...