jquery - オブジェクト指向の方法で jQuery スライダーのコードを記述する方法は?

Question

時間のスライド、ボタンのスライド、前後の矢印のスライドの機能を持つスライダーを作成しました。

html は次のとおりです。

<div id="viewport-container">
<section id="sliding-container">
<article id="slide-0" class="displayed" style="display:block;"><div class="description"></div></article>
<article id="slide-1" style="display:none"><div class="description"><span></span></div></article>
<article id="slide-2" style="display:none"><div class="description"><span></span></div></article>
<article id="slide-3" style="display:none"><div class="description"><span></span></div></article>
</section>
<ul id="arrows-nav">
<li><a id="prev-arrow" href="#"></a></li>
<li><a id="next-arrow" href="#"></a></li>
</ul>
</div>
<div id="nav-container">
<nav id="slider-nav">
<a id="btn-0" href="#slide-0" class="active"></a>
<a id="btn-1" href="#slide-1"></a>
<a id="btn-2" href="#slide-2"></a>
<a id="btn-3" href="#slide-3"></a>
</nav>
</div>

ここにcss：

#viewport-container {
height: 250px;
width: 980px;
margin: 0 auto;
overflow: hidden;
position: relative;

}

#sliding-container {
width: 100%;
}

#slide-0 {
background-image: url(/Images/slide_home.jpg);
height: 250px;
width: 980px;
position: absolute;
}

#slide-1 {
background-image: url(/Images/slide_informatica.jpg);
height: 250px;
width: 980px;
position: absolute;
}

#slide-2 {
background-image: url(/Images/slide_musica.jpg);
height: 250px;
width: 980px;
position: absolute;
}

#slide-3 {
background-image: url(/Images/slide_recensioni.jpg);
height: 250px;
width: 980px;
position: absolute;
}

#slide-0:before, #slide-1:before, #slide-2:before, #slide-3:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(black, transparent 1.5%, transparent 99%, black);
}

.description {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
right: 100px;
background: url(/images/description.png);
/*padding: 37px 33px 40px 40px;*/
border-radius: 7px;
}

.title-description{
color:#fff;
}


#arrows-nav {
padding: 0;
margin: 0;
}

#arrows-nav li a {
width: 27px;
height: 45px;
margin: -17px 0 0;
display: block;
position: absolute;
top: 50%;
cursor: pointer;
}

#prev-arrow {
background: url(/Images/prev-arrow.png) no-repeat 0 0;
left: 0px;
}

#next-arrow {
background: url(/Images/next-arrow.png) no-repeat 0 0;
right: 0px;
}

#slider-nav {
text-align: center;
margin: 0 auto;
position: relative;
width: 980px;
padding-top: 10px;
padding-bottom: 10px;
}

#slider-nav:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(to right, #fff, #ddd, #ddd, #fff);
}

#slider-nav a {
width: 10px;
height: 10px;
display: inline-block;
background: #ddd;
border-radius: 50%;
}

#slider-nav a:hover {
background: #999;
}

#slider-nav a.active {
background: #999;
}

そしてここにスクリプトコード

<script>
    var $navButtons = $("#slider-nav > a");        
    var $navArrow = $("#arrows-nav  a");
    var timing = 3500;

    Manage();
    SlideShow();
    function SlideShow() {
        var interval = setInterval("SlideSwitch()", timing);

        $('#sliding-container').hover(
            function () {
                clearInterval(interval)
            },
            function () {
                interval = setInterval(SlideSwitch, timing)
            }
            );

        $('#slider-nav').hover(
            function () {
                clearInterval(interval)
            },
            function () {
                interval = setInterval(SlideSwitch, timing)
            }
            );
    }

    function Manage() {
        $navArrow.click(function (event) {
            event.preventDefault();
            var $selectedArrow = $(this);
            var idSelectedArrow = $selectedArrow.attr("id");
            SlideWithArrow(idSelectedArrow);

        });

        $navButtons.click(function (event) {
            event.preventDefault();
            var $selectedButton = $(this);
            var rawIdSlideToFadeIn = $selectedButton.attr("href");
            $navButtons.removeClass("active");
            $selectedButton.addClass("active");

            CrossFading(rawIdSlideToFadeIn);
        });
    };

    function SlideSwitch() {
        var $activeButton = $("#slider-nav > a.active");
        var $nextButton = $activeButton.next().length
            ? $activeButton.next()
            : $('#slider-nav > a:first');

        $activeButton.removeClass("active");
        $nextButton.addClass("active");

        var $activeSlide = $("article.displayed");
        var $nextSlide = $activeSlide.next().length
            ? $activeSlide.next()
            : $('#sliding-container > article:first');

        var idActiveSlide = $activeSlide.attr("id");
        var idNextSlide = $nextSlide.attr("id");

        if (idActiveSlide != idNextSlide) {
            $activeSlide.removeClass("displayed").css("style", "none").fadeOut();
            $nextSlide.addClass("displayed").css("style", "block").fadeIn();
        }
    };

    function SlideWithArrow(idArrow) {
        var $activeButton = $("#slider-nav > a.active");
        var $prevButton = $activeButton.prev().length
            ? $activeButton.prev()
            : $('#slider-nav > a:last');
        var $nextButton = $activeButton.next().length
            ? $activeButton.next()
            : $('#slider-nav > a:first');

        var idPrevArrow = $("#prev-arrow").attr("id");
        var idNextArrow = $("#next-arrow").attr("id");

        var $activeSlide = $("article.displayed");
        var $nextSlide = $activeSlide.next().length
            ? $activeSlide.next()
            : $('#sliding-container > article:first');
        var $prevSlide = $activeSlide.prev().length
            ? $activeSlide.prev()
            : $('#sliding-container > article:last');

        if (idArrow == idPrevArrow) {
            $activeButton.removeClass("active");
            $prevButton.addClass("active");

            $activeSlide.removeClass("displayed").css("style", "none").fadeOut();
            $prevSlide.addClass("displayed").css("style", "block").fadeIn();
        }

        if (idArrow == idNextArrow) {
            $activeButton.removeClass("active");
            $nextButton.addClass("active");

            $activeSlide.removeClass("displayed").css("style", "none").fadeOut();
            $nextSlide.addClass("displayed").css("style", "block").fadeIn();
        }

    };

    function CrossFading(rawIdSlideToFadeIn) {
        var $slideToFadeIn = $(rawIdSlideToFadeIn);
        var $slideToFadeOut = $("article.displayed");
        var idSlideToFadeOut = $slideToFadeOut.attr("id");
        var idSlideToFadeIn = $slideToFadeIn.attr("id");

        if (idSlideToFadeIn != idSlideToFadeOut) {
            $slideToFadeOut.removeClass("displayed").css("style", "none").fadeOut();
            $slideToFadeIn.addClass("displayed").css("style", "block").fadeIn();
        }

    };

</script>

との 3 つの関数SlideSwitch()は、アクティブなボタン (つまり、表示されたスライドに対応するボタン)とアクティブなスライド (つまり、表示されたスライド)SlideWithArrow(idSelectedArrow)をそれぞれ取得します。CrossFading(rawIdSlideToFadeIn)

コードはうまく機能しますが、私はそれが好きではありません: A) 「アクティブボタンとアクティブスライド」状態をカプセル化するオブジェクト「アクティブボタン + スライド」を作成し、B) このオブジェクトを参照として使用することを希望します。上記の 3 つの関数は、アクティブなボタンとスライドを取得するタスクをこれらの関数に要求します。

誰かが私が説明した方法でコードを作り直すためのヒントを教えてもらえますか?

どうもありがとうございました。

score 0 · Accepted Answer

画像をフォルダーに入れ、ajax を使用してダウンロードすることをお勧めします。つまり、ユーザーが次のボタンを押した場合に ajax が実行され、画像をダウンロードする関数を作成し、jquery html オーダーを使用して、古い画像の代わりにその新しい画像を配置できます。ajax で間隔スライダーをコーディングする前に、これを読む必要があります。

jquery - オブジェクト指向の方法で jQuery スライダーのコードを記述する方法は?

1 に答える 1

Related

Reference