jQuery 自定义元素旋转帮助

Question

嘿！ 我正在尝试编写一个简单的内容/图像旋转横幅，我可以单击左箭头或右箭头来旋转内容..

我对所有内容都进行了编码，并且它可以工作，但是以非常初学者的方式，并且非常希望有一种更好，更强大的方式来做到这一点。

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();
        });
    }
});

感谢您的帮助！

Answer 1

可能是这样的：

编辑：点击处理程序现在允许您向前和向后“循环”。

// 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();
    });
}

使用此方法，您不必为每张幻灯片指定唯一 ID，但幻灯片元素必须是 #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();
    });
}