#jquery #html #css #jquery-plugins #cycle
#jquery #HTML #css #jquery-плагины #цикл
Вопрос:
Обновлено — добавлена функция onAfter
У меня странная проблема с циклом.
Проблема, с которой я сталкиваюсь, заключается в том, что класс «activeSlide» не добавляется к кнопкам пейджера, пока вы не нажмете на одну. Он отлично работает при нажатии на элементы пейджера, но при загрузке страницы, когда ползунок начинает перемещаться, он остается на первом элементе пейджера.
Вот мой jquery:
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'scrollHorz',
timeout: 4000,
pause: 1,
pager: '#nav_slide',
prev: '#prev_btn',
next: '#next_btn',
after: onAfter,
pagerAnchorBuilder: paginate
});
});
function paginate(idx, el)
{
return '<div class="slide' idx '"></div>';
}
function onAfter() {
var hasClass = $(".slide3").hasClass("activeSlide");
var hasTheClass = $(".slide0").hasClass("activeSlide");
if(hasClass == true) {
$("#nav_slide").animate({"left": "-=226px"}, "fast");
}else if(hasTheClass == true) {
$("#nav_slide").animate({"left": "0px"}, "fast");
}
}
Есть идеи? Я уже некоторое время в тупике!
Заранее спасибо.
Ответ №1:
Небольшое разъяснение в постановке проблемы помогло бы
1) У вас возникли проблемы с «кнопками навигации» или «кнопками пейджера»?
2) Что такое «activeClass». Вы имеете в виду «activeSlide», который добавляется к элементам pager (1,2,3 ..)?
3) Пожалуйста, вставьте HTML и CSS, если они актуальны.
PS: Поскольку элементы пейджера являются ссылками на слайды, я бы рекомендовал использовать <a> вместо тегов <div> .
function paginate(idx, el) {
return '<a href="#">' (idx 1) '</a>';
}
Комментарии:
1. Спасибо за ответы! Я перешел на использование тегов вместо divs, хороший вызов. Я был в спешке, когда добавил вопрос, извините за ошибки. Чтобы уточнить: у меня возникла проблема с классом «activeSlide», который добавляется к элементам пейджера. HTML и CSS на самом деле не имеют значения. Происходит то, что при загрузке страницы цикл запускается нормально, но кнопки пейджера не принимают класс activeSlide. Класс activeSlide остается на первом слайде до тех пор, пока не будет нажат один из пейджеров. После нажатия на пейджер он начинает работать правильно. Есть идеи?
2. Я могу придумать 2 возможные причины 1) Какова ваша реализация метода ‘onAfter’? Наблюдаемая причуда может быть результатом некоторой ошибки в реализации этого метода. Пожалуйста, вставьте код для ‘onAfter’ 2) Особенность браузера: какой браузер и какую версию вы используете для тестирования? @Sreenath $(документ). ready(function(){ //обработчик }); И $(function(){ //обработчик }); являются эквивалентами. Таким образом, они не создадут никакой ссылки на разницу
3. Я опубликовал функцию в вопросе. Я использую Chrome для тестирования, но я также проверил ie и ff, это происходит повсеместно. Функция ‘onAfter’ проверяет, имеет ли элемент пейджера класс ‘activeSlide’. Если у четвертого элемента пейджера есть класс, левая позиция анимируется. Одновременно отображаются только 3 пейджера, поэтому, как только он попадает на четвертый, левая позиция перемещается, чтобы отобразить оставшиеся 3. Эта функциональность является неполной, но это уже другая история. Есть еще идеи? Еще раз спасибо за ввод.
4. Подключив updateActivePagerLink, мы должны быть начеку в порядке (0,1,2 ..) . $(«#slider»).cycle({ fx: ‘scrollHorz’, тайм-аут: 4000, пауза: 1, пейджер: ‘#nav_slide’, предыдущий: ‘#prev2’, следующий: ‘#next2’, after: onAfter, pagerAnchorBuilder: paginate, updateActivePagerLink: функция (пейджер, currSlide, clsName) { оповещение (currSlide); } }); Если этот порядок не отображается, что-то не так. Дайте мне знать, что произойдет
5. Спасибо за ответ, после его подключения я получаю только ‘0’ для предупреждения. Я заметил, что в примере, который вы привели в своем комментарии, вы используете идентификаторы, а не классы, повлияет ли это на функциональность вообще? Если я использую ссылки на пейджер, они предупреждают о правильных числах.