Справка поворота пользовательского элемента jQuery - PullRequest
Новая
       16

Справка поворота пользовательского элемента jQuery

0 голосов
/ 23 февраля 2011

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

У меня есть все, что написано, и это работает, но очень новичкам, и я был бы очень признателен.лучший, более надежный способ сделать это. 

jQuery("span.left-arrow").click(function() {
    var visible = jQuery("#home_slider .slide:visible").attr("id");
    var slide1 = jQuery("#home_slider #slide1");
    var slide2 = jQuery("#home_slider #slide2");
    var slide3 = jQuery("#home_slider #slide3");
    if (jQuery(visible == "slide1")) {
        jQuery("#home_slider #slide1:visible").fadeOut(function() {
            slide3.fadeIn();
        });
    }
    if (jQuery(visible == "slide2")) {
        jQuery("#home_slider #slide2:visible").fadeOut(function() {
            slide1.fadeIn();
        });
    }
    if (jQuery(visible == "slide3")) {
        jQuery("#home_slider #slide3:visible").fadeOut(function() {
            slide2.fadeIn();
        });
    }
});
// right arrow
jQuery("span.right-arrow").click(function() {
    var visible = jQuery("#home_slider .slide:visible").attr("id");
    var slide1 = jQuery("#home_slider #slide1");
    var slide2 = jQuery("#home_slider #slide2");
    var slide3 = jQuery("#home_slider #slide3");
    if (jQuery(visible == "slide1")) {
        jQuery("#home_slider #slide1:visible").fadeOut(function() {
            slide2.fadeIn();
        });
    }
    if (jQuery(visible == "slide2")) {
        jQuery("#home_slider #slide2:visible").fadeOut(function() {
            slide3.fadeIn();
        });
    }
    if (jQuery(visible == "slide3")) {
        jQuery("#home_slider #slide3:visible").fadeOut(function() {
            slide1.fadeIn();
        });
    }
});

Спасибо за помощь!

1 Ответ

0 голосов
/ 23 февраля 2011

Возможно, что-то вроде этого:

РЕДАКТИРОВАТЬ: обработчики щелчков теперь позволят вам «зацикливаться» вперед и назад. 

// a reference to the currently shown slide
// you will have to initialize this somewhere
var currentSlide;

jQuery("span.left-arrow").click(function() {
    currentSlide.fadeOut(function(){
        // if it has a previous sibling, use the previous sibling
        // otherwise set it to the last slide
        currentSlide = currentSlide.prev().length ? currentSlide.prev() : currentSlide.siblings().last();
        currentSlide.fadeIn();
    });
}

jQuery("span.right-arrow").click(function() {
    currentSlide.fadeOut(function(){
        currentSlide = currentSlide.next().length ? currentSlide.next() : currentSlide.siblings().first();
        currentSlide.fadeIn();
    });
}

Используя этот метод, выне обязательно присваивать каждому слайду уникальный идентификатор, но элементы слайда должны быть единственными дочерними элементами #home_slider.

. Вы можете инициализировать что-то вроде: 

jQuery(function(){
    // this loops through all slides when the page loads and
    // assigns the first slide to the variable currentSlide
    // and hides all the others
    jQuery("#home_slider").children().each(function(index){
        index == 0 ? currentSlide = jQuery(this) : jQuery(this).hide();
    });
}
...