Число позади на картинке (1/10) Jquery Cycle All Plugin - PullRequest
Новая
       12

Число позади на картинке (1/10) Jquery Cycle All Plugin

0 голосов
/ 05 марта 2011

Немного новичка, но у него просто небольшая проблема с использованием цикла jquery all plugin. Я пытаюсь создать галерею изображений, с двумя кнопками «Следующая» и «Предыдущая», которые работают нормально, и со счетчиком, например (1/10) и т. Д. У меня это работает, но по какой-то причине слайд-шоу никогда не считает первое изображение таким поэтому всегда одно изображение позади.

Кто-то сказал мне, что, возможно, массив начинается с 0, а что-то еще с 1, но я не уверен, где это найти, поэтому просто удивляюсь, может ли кто-нибудь мне помочь. Вот код в заголовке моего документа. 

<script type="text/javascript">

$(document).ready(function(){ 
 $('#slideshow').cycle({
 fx:'none', 
 speed:'fast', 
 timeout: 0, 
 next:'#next',
 prev:'#prev',
 after: onAfter
 });
});

function onAfter(curr,next,opts) {
 var caption1 = (opts.currSlide +1) + '/' + opts.slideCount;
 $('#caption1').html(caption1);
}
    </script>

используется с плагином Cycle All.

спасибо за любую помощь!

так что я перешел на это в соответствии с инструкциями. 

<script type="text/javascript">

$(document).ready(function(){ 
    $('#slideshow').cycle({
    fx:'none', 
    speed:'fast', 
    timeout: 0, 
    next:'#next',
    pager: '#caption1',
    prev:'#prev',
    after: onAfter1
    });
});

currentSlide = $("#caption1 a.activeSlide").html()

function onAfter1(curr,next,opts) {
    var caption1 = (opts.currSlide +1) + '/' + opts.slideCount;
    $('#caption1').html(caption1);

}
</script>

, который отлично работает после первого слайда, но первый слайд случайным образом говорит это:

Пред. След. (1/111234567891011)

Затем, когда я нажимаю «Далее», он исчезает, возможно, это моя ошибка, но связано ли это с имеющейся у меня функцией?

если я перейду на это: 

<script type="text/javascript">

$(document).ready(function(){ 
    $('#slideshow').cycle({
    fx:'none', 
    speed:'fast', 
    timeout: 0, 
    next:'#next',
    pager: '#caption1',
    prev:'#prev',
    });
currentSlide = $("#caption1 a.activeSlide").html()

});
</script>

Он просто говорит 12345678910 вместо 1 и т. Д.

Edit:

Я изменил код в соответствии с инструкциями, см. Здесь, http://www.amythornley.co.uk/tests/codeplay.html и: 

<script type="text/javascript">

$(document).ready(function(){ 
    $('#slideshow').cycle({
    fx:'fade', 
    speed:1, 
    timeout: 0, 
    pager: '.thepager',
    next:'#next',
    prev:'#prev',
    after: onAfter1
    });
   });

function onAfter1(curr, next, opts) {
    currentSlide = $(".thePager a.activeSlide").html();
    if (!currentSlide) currentSlide = "1";
    $('.slideCaption').html(currentSlide + '/' + opts.slideCount);
}

</script>

но он все равно не работает, даже если он отлично работает в вашем примере, раздражаясь! гррр. тупая штука :( и я знаю о сломанных изображениях, которые я уже загрузил, просто тест, чтобы увидеть следующую / предыдущую проблему.

EDIT!

Я использовал свой исходный код, просто изменив проблему с «нет» и скоростью, и кажется, что она работает нормально, возможно, это была проблема все время, большое спасибо за указание на это и за вашу помощь, даже если некоторые из это оказалось бессмысленным хаха 

<script type="text/javascript">

$(document).ready(function(){ 
    $('#slideshow').cycle({
    fx:'fade', 
    speed:1, 
    timeout: 0, 
    next:'#next',
    prev:'#prev',
    after: onAfter1
    });
});

function onAfter1(curr,next,opts) {
    var caption1 = (opts.currSlide +1) + '/' + opts.slideCount;
    $('#caption1').html(caption1);
}
    </script>

1 Ответ

0 голосов
/ 05 марта 2011

вы можете "поиграть" с его собственной навигацией и получить текущий номер изображения, например: 

$('.selector').cycle({ 
    fx:     'scrollLeft',
    pager:  '.selctorOfPagination',
    timeout:  15000,
    pause: 1,
    next:   '.selectorOfNext', 
    prev:   '. selectorOfPrevious'
});

посмотрите пример пейджера здесь: http://jquery.malsup.com/cycle/int2.html

РЕДАКТИРОВАТЬ: проверьте мойпример здесь: http://jsfiddle.net/jackJoe/7DRSv/

Вы можете проверить, какое изображение является текущим, получив HTML-код пейджера: 

currentSlide = $(".thePager a.activeSlide").html()

И затем вы можете использовать эту переменную, которая верна, и вы нене нужно «угадывать», какое изображение является текущим.

РЕДАКТИРОВАТЬ 2: Проверьте мой новый пример: http://jsfiddle.net/jackJoe/7DRSv/2/

PS при первой анимации слайда, заголовок не получаетактивная, поэтому нам нужно установить эту переменную, проверьте мой пример.

РЕДАКТИРОВАТЬ 3: Новый пример с остановленной анимацией, запускаемой следующей и предыдущей кнопками: http://jsfiddle.net/jackJoe/7DRSv/3/

Одна вещьЯ узнал, что на вашем сайте (кстати, изображения не работают), когда не используется какая-либо анимация (fx: «none»), первый активный слайд отстает на одну цифру!что возвращает нас к исходной проблеме!

Вам необходимо использовать некоторую анимацию (вы можете указать скорость в миллисекундах);для альтернативы none используйте fx = 'fade' и speed: 1 ...

...