0

コンテンツ スライダーがあり、コンテンツ スライダーのカウンターは cnt.text(i+1+' / '+amount); の使用に基づいて更新されます。しかし、数値カウンターを表示する代わりに、アクティブなクラスが割り当てられている弾丸を表示したいと思います。

これは以下の jsfiddle です: http://jsfiddle.net/REn8C/2/

スライダーの HTML は次のとおりです。

<div class="homepageslider_imageholder">
    <ul id="sliderbannerlist" class="homepageslider_imageslist">
        <li class="acslide slide1" style="">
            <div class="acslidecontainer">
                SLIDE 1 HERE
                <div class="clear"></div>
            </div>
        </li>
        <li class="acslide slide2" style="display: none;">
            <div class="acslidecontainer">
                SLIDE 2 HERE
                <div class="clear"></div>
            </div>
        </li>
        <li class="acslide slide3" style="display: none;">
            <div class="acslidecontainer">
                SLIDE 3 HERE
                <div class="clear"></div>
            </div>
        </li>
        <li class="acslide slide4" style="display: none;">
            <div class="acslidecontainer">
                SLIDE 4 HERE
                <div class="clear"></div>
            </div>
        </li>
    </ul>

    <!-- Slide Pager: Start -->
    <div id="slidecounter" class="homepageslider_pagerholder">
        <ul class="homepageslider_pagerlist">
            <li><span></span></li>
            <li class="active"><span></span></li>
            <li><span></span></li>
            <li><span></span></li>
        </ul>

        <div class="clear"></div>
    </div>
    <!-- Slide Pager: End -->

    <div class="clear"></div>
</div>

CSSは次のとおりです。

div.homepageslider {}
div.homepageslider_holder {}
    div.homepageslider_inner {
        position: relative;
        margin: 0 auto;
        width: 929px;
        height: 318px;
        border: 9px solid #fff;
        background: #d7c288;

        -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);
        -moz-box-shadow:    0 0 25px rgba(0, 0, 0, 0.15);
        box-shadow:         0 0 25px rgba(0, 0, 0, 0.15);
        }

        /* Navigation */
        div.homepageslider_nav {
            position: absolute;
            top: 35px;
            right: 0;
            z-index: 50;
            width: 155px;
            }
            ul.homepageslider_navlist {
                margin: 0;
                padding: 0;
                list-style-type: none;
                }
                ul.homepageslider_navlist li {
                    margin: 0 0 3px !important;
                    display: block;
                    width: 155px;
                    height: 25px;
                    font-size: 12px;
                    letter-spacing: -0.75px;
                    line-height: auto;
                    list-style-type: none;
                    }
                    ul.homepageslider_navlist a {
                        padding: 0 0 0 12px;
                        display: block;
                        height: 25px;
                        color: #fff;
                        text-decoration: none !important;
                        text-transform: uppercase;
                        background-color: #736056;

                        text-shadow: 1px 1px 0 #40352f;
                        -webkit-transition: all 0.3s ease-in-out;
                        -moz-transition:    all 0.3s ease-in-out;
                        -ms-transition:     all 0.3s ease-in-out;
                        -o-transition:      all 0.3s ease-in-out;
                        transition:         all 0.3s ease-in-out;
                        }
                        ul.homepageslider_navlist a:hover {
                            background-color: #40352f;
                            }
                        ul.homepageslider_navlist span {
                            display: block;
                            height: 25px;
                            line-height: 25px;
                            }

        /* Image Holder */
        div.homepageslider_imageholder {
            position: relative;
            z-index: 40;
            margin: 0;
            padding: 0;
            width: 929px;
            height: 318px;
            }
            ul#sliderbannerlist {
                margin: 0;
                padding: 0;
                list-style-type: none;
                }
                ul#sliderbannerlist li.acslide {
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 5;
                    width: 929px;
                    height: 318px;
                    list-style-type: none;
                    }
                    ul#sliderbannerlist div.acslidecontainer {
                        width: 929px;
                        height: 318px;
                        }
                        ul#sliderbannerlist img {}

            /* Pager Holder */
            div.homepageslider_pagerholder {
                position: absolute;
                bottom: 0;
                left: 50%;
                z-index: 50;
                margin: 0 0 0 -40px;
                padding: 0 9px;
                height: 22px;
                background-color: #fff;
                }
                ul.homepageslider_pagerlist {
                    margin: 0;
                    padding: 0;
                    list-style-type: none;
                    }
                    ul.homepageslider_pagerlist li {
                        margin: 7px 5px 0;
                        padding: 0;
                        display: block;
                        float: left;
                        width: 8px;
                        height: 8px;
                        list-style-type: none;
                        }
                        ul.homepageslider_pagerlist li.active {}
                        ul.homepageslider_pagerlist span {
                            display: block;
                            width: 8px;
                            height: 8px;
                            cursor: pointer;
                            background-color: #89c2b2;

                            -webkit-border-radius:  5px;
                            -moz-border-radius:     5px;
                            border-radius:          5px;
                            }
                            ul.homepageslider_pagerlist li.active span {
                                background-color: #595656;
                                }

スライダーのプラグインは次のとおりです。

(function($){
    $.fn.acSlider = function(interval) {
        var slides;
        var cnt;
        var amount;
        var i;

        function run() {
            // Hiding previous slide and showing next
            $(slides[i]).fadeOut(1000);
            i++;
            if (i >= amount) i = 0;
            $(slides[i]).fadeIn(1000);

            // Updating Counter
            cnt.text(i+1+' / '+amount);

            // Loop
            setTimeout(run, interval);
        }

        slides  = $('#sliderbannerlist').children();
        cnt     = $('#slidecounter');
        amount  = slides.length;
        i=0;

        // Updating Counter
        cnt.text(i+1+' / '+amount);

        setTimeout(run, interval);
    };
})(jQuery);

現在、スライドが 4 枚あるため、#slidecounter 内のカウンターに追加されるのは、1/4、2/4、3/4、4/4 です。代わりに、クラスをアクティブな箇条書きに変更して、HTML にあるものをカウンターに使用したいと思います。

    <!-- Slide Pager: Start -->
    <div id="slidecounter" class="homepageslider_pagerholder">
        <ul class="homepageslider_pagerlist">
            <li><span></span></li>
            <li class="active"><span></span></li>
            <li><span></span></li>
            <li><span></span></li>
        </ul>

        <div class="clear"></div>
    </div>
    <!-- Slide Pager: End -->

カウンターが希望どおりに動作するように jQuery プラグインを変更するにはどうすればよいですか?

4

1 に答える 1

1

まず、箇条書きを生成するコードを作成します。次のようなもの：

for (z = 0; z < amount; z++) {
    $(".homepageslider_pagerlist").append('<li><span></span></li>');
}

次に、新しいアクティブなクラスを追加するコードが必要になります。

$(".homepageslider_pagerlist li").eq(i - 1).addClass('active');

1 の減算に注意してください。これは、eq セレクターが 0 ベースであるためです。

JSFiddle のちょっとしたデモ

編集：他のliからクラスを削除することもできます。非常に単純です。 removeClass('active') を使用するだけです

于 2013-07-08T14:32:05.820 に答える