Javascript 如何将页面指示器添加到我创建的jquery div carosel中？

我把这个快速旋转木马放在一起，用来循环遍历包含图形和其他各种数据的不同div。我想有一些东西表明哪个“页面”或div你目前正在查看

下面是一个示例，说明了我目前正在迭代div。

我的计划是，根据行中指示的页面，有一行点处于活动或非活动状态。但即使是一个基本的页面计数器也可以在这一点上工作

---

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

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

最简单的方法是在内容分区中放置一些充当计数器的内容，即在第一个分区中放置“1/3”，在下一个分区中放置“2/3”，等等。当然，这种方法的缺点是对更改的响应性不强。更好的选择是保留一个单独的变量，跟踪哪个元素是可见的，然后单击“下一步”按钮时，该变量递增，然后运行检查以查看该索引是否存在。如果不是，则返回开始。当然，与之相反的是“上一步”按钮。

这是一个简单的寻呼机，用于您的转盘，请欣赏；）

---

这是一个简单的寻呼机，请欣赏；）

---

创建了一些您可以使用的东西

$（“div[id^=marquee]：gt（0）”）.hide（）；
函数startTimer（）{
i=设定间隔（旋转，2000）；
返回i；
}
var intID=startTimer（）；
函数stopTimer（）{
净间隔（intID）；
}
函数rotate（）{
reference=$（“div[id^=marquee]：可见”）.hide（）.next（“div[id^=marquee]”）；
reference.length？$（reference.fadeIn（）：$（“div[id^=marquee]：first”）.fadeIn（）；
点=$（“.indicator on[id^=indicator]”）。移除类（“indicator on”）。下一步（“a[id^=indicator]”）。添加类（“indicator on”）；
dot.length？$（dot.addClass（“指示器打开”）：$（[a[id^=indicator]：first”）.addClass（“指示器打开”）；
}
$（“div[id^=marquee]”）。每个（函数（）{
$（“#指标”）。追加（“”）；
$（“.indicator:first”）.addClass（“指示器打开”）；
});
$（“a[id^=indicator]”）。单击（函数（e）{
风险值指数=$（“a[id^=indicator]”）；
//警报（索引）；
$（“div[id=marquee]”）。hide（）；
$（“div[id=marquee]”）.eq（index.show（）；
$（“a[id=indicator]”。removeClass（“indicator on”）；
$（“a[id=indicator]”.eq（index）.addClass（“indicator on”）；
停止计时器（）；
intID=startTimer（）；
e、 预防默认值（）；
});
$（“a[id=indicator]，div[id=marquee]”）{
停止计时器（）；
//警惕（“鼠标器”）；
}).mouseleave（函数（）{
停止计时器（）；
intID=startTimer（）；
//警惕（“鼠标退出”）；
});

创建了一些您可以使用的东西

$（“div[id^=marquee]：gt（0）”）.hide（）；
函数startTimer（）{
i=设定间隔（旋转，2000）；
返回i；
}
var intID=startTimer（）；
函数stopTimer（）{
净间隔（intID）；
}
函数rotate（）{
reference=$（“div[id^=marquee]：可见”）.hide（）.next（“div[id^=marquee]”）；
reference.length？$（reference.fadeIn（）：$（“div[id^=marquee]：first”）.fadeIn（）；
点=$（“.indicator on[id^=indicator]”）。移除类（“indicator on”）。下一步（“a[id^=indicator]”）。添加类（“indicator on”）；
dot.length？$（dot.addClass（“指示器打开”）：$（[a[id^=indicator]：first”）.addClass（“指示器打开”）；
}
$（“div[id^=marquee]”）。每个（函数（）{
$（“#指标”）。追加（“”）；
$（“.indicator:first”）.addClass（“指示器打开”）；
});
$（“a[id^=indicator]”）。单击（函数（e）{
风险值指数=$（“a[id^=indicator]”）；
//警报（索引）；
$（“div[id=marquee]”）。hide（）；
$（“div[id=marquee]”）.eq（index.show（）；
$（“a[id=indicator]”。removeClass（“indicator on”）；
$（“a[id=indicator]”.eq（index）.addClass（“indicator on”）；
停止计时器（）；
intID=startTimer（）；
e、 预防默认值（）；
});
$（“a[id=indicator]，div[id=marquee]”）{
停止计时器（）；
//警惕（“鼠标器”）；
}).mouseleave（函数（）{
停止计时器（）；
intID=startTimer（）；
//警惕（“鼠标退出”）；
});

是的，我确实希望避免在div本身中使用静态数字，因为div的数量是可变的。我想我可以知道如何计算div的总数，并将其设置为变量，然后根据该变量首先显示适当数量的点图像作为起点。我仍然是一个jquerynoob。是的，我真的想避免在div本身中使用静态数字，因为div的数量是可变的。我想我可以知道如何计算div的总数，并将其设置为变量，然后根据该变量首先显示适当数量的点图像作为起点。不过我还是个jquerynoob，太棒了，谢谢！快速提问：有没有一种方法可以将图像附加到计数器而不是数字中？我很羡慕你的速度，再次感谢你的帮助！我猜，为了处理活动状态，我可以使用If状态来检查并查看当前显示的页面，并根据该状态切换到活动页面。是的，但我建议您使用jQuery Cycle之类的插件，这是在jQuery中制作旋转木马最简单、最简单的方法。是的，我知道

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