Question

我有一个内容滑块，内容滑块的计数器基于使用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插件以便修改计数器以按照我想要的方式工作？

Answer 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的

A little JSFiddle demo

编辑：您还想要从其他li中删除该类。很简单，只需使用removeClass（'active'）

如何修改滑块代码计数器？

1 个答案: