如何为我制作的这个jQuery div Carosel添加页面指示器？

Question

我将这个快速轮播放在一起，用于循环浏览包含图表和其他各种数据的不同div。 我想显示一些指示您当前正在查看的“页面”或div。

这是我目前正在遍历div的示例。 http://jsfiddle.net/d6nZP/64/

我的计划是要有一排点处于活动状态或不处于活动状态，这取决于行中指示的页面。 但是，此时即使是基本的页面计数器也可以使用。

任何帮助将不胜感激，谢谢！

Answer 1

这是您的轮播的简单传呼器，请尽情享受;） http://jsfiddle.net/d6nZP/65/

Answer 2

创建了一些您可以使用的东西http://jsfiddle.net/BadBoyBill/8yHmy/

    $("div[id^=marquee]:gt(0)").hide();

    function startTimer(){
        i = setInterval(rotate, 2000);
        return i;
    }

    var intID = startTimer();

    function stopTimer(){
        clearInterval(intID);
    }

    function rotate(){
        reference = $("div[id^=marquee]:visible").hide().next("div[id^=marquee]");
        reference.length ? $(reference).fadeIn() : $("div[id^=marquee]:first").fadeIn() ;
        dot = $(".indicator-on[id^=indicator]").removeClass("indicator-on").next("a[id^=indicator]").addClass("indicator-on");
        dot.length ? $(dot).addClass("indicator-on") : $("a[id^=indicator]:first").addClass("indicator-on");
    }

    $("div[id^=marquee]").each(function(){
        $("#indicators").append("<a href='#' id='indicator' class='indicator'></a>");
        $(".indicator:first").addClass("indicator-on");
    });

    $("a[id^=indicator]").click(function(e){
        var index = $("a[id^=indicator]").index(this);
        //alert(index);
        $("div[id=marquee]").hide();
        $("div[id=marquee]").eq(index).show();
        $("a[id=indicator]").removeClass("indicator-on");
        $("a[id=indicator]").eq(index).addClass("indicator-on");
        stopTimer();
        intID = startTimer();
        e.preventDefault();
    });

    $("a[id=indicator], div[id=marquee]").mouseenter(function(){
        stopTimer();
        //alert("mouseenter");
    }).mouseleave(function(){
        stopTimer();
        intID = startTimer();
        //alert("mouseexit");
    });

Answer 3

最简单的方法是在内容div本身中放入一些作为计数器的内容，即在第一个div中放入“ 1/3”，在下一个“ 2/3”中，等等。当然，该方法，其缺点是对变更反应不灵敏。 更好的选择是保留一个单独的变量，以跟踪哪个元素可见，然后单击“下一步”按钮时，变量将递增，然后运行检查以查看该索引是否存在。 如果不是，则循环返回开始。 当然，与上一个按钮相反。