0

おい！左矢印または右矢印をクリックしてコンテンツを回転できる単純なコンテンツ/画像回転バナーをコーディングしようとしています..

私はすべてをコーディングしましたが、それは機能しますが、非常に初心者の方法であり、より良い、より堅牢な方法を本当に感謝しています.

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

助けてくれてありがとう！

4

1 に答える 1

0

おそらくこのようなもの：

編集:クリック ハンドラーを使用すると、前後に「ループ」できるようになります。

// 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();
    });
}
于 2011-02-23T07:08:23.530 に答える