如何创建带点的滑块(How to create a slider with dots)

如何创建带点的滑块(How to create a slider with dots)

我想在页面上有一个带有10个点的滑块。 “items.slider”。 我希望滑块中的每个项目都是DOT。 所有10个点始终可见，只有1个点具有焦点。 焦点每5秒更改一次到下一个点。 在列表的末尾，焦点回到第一个点。

我试图用画布在其中创建10个小圆圈等。

我怎么能做到最好？

正如要求： http ： //jsfiddle.net/Jh73K/8/

I want to have a slider bar on the page with 10 dots. "items.slider". I want each item in slider to be a DOT. All the 10 dots are visible all the time with only 1 dot having the focus. The focus changes every 5 secs to the next dot. At the end of the list, focus goes back to the first dot.

I was trying to have a canvas and create 10 small circles in it etc.

How can I do this best?

As asked for: http://jsfiddle.net/Jh73K/8/

最满意答案

请看这里的链接。 您可以使用相同的CSS / HTML，然后使用以下javascript来更改活动项目。 请记住，下面的代码是针对该链接中提到的HTML。

$(document).ready(function() { setInterval(function() { var o = $("ol.pagination").find(".on").removeClass("on"); if ($(o).is(':last-child')) $("ol.pagination").find("li:first-child").addClass("on"); else $(o).next().addClass("on"); }, 5000); });

看看这是不是你想要的。 编辑：顺便说一句，这是一个相同的小提琴： http ： //jsfiddle.net/W8kZf/ 。

Look at this link here. You can use the same CSS/HTML and then the following javascript to change the active item. Remember the code below is for the HTML mentioned in that link.

$(document).ready(function() { setInterval(function() { var o = $("ol.pagination").find(".on").removeClass("on"); if ($(o).is(':last-child')) $("ol.pagination").find("li:first-child").addClass("on"); else $(o).next().addClass("on"); }, 5000); });

​See if this is what you want. EDIT: By the way, here's a fiddle for the same: http://jsfiddle.net/W8kZf/.

如何创建带点的滑块(How to create a slider with dots)

我想在页面上有一个带有10个点的滑块。 “items.slider”。 我希望滑块中的每个项目都是DOT。 所有10个点始终可见，只有1个点具有焦点。 焦点每5秒更改一次到下一个点。 在列表的末尾，焦点回到第一个点。

我试图用画布在其中创建10个小圆圈等。

我怎么能做到最好？

正如要求： http ： //jsfiddle.net/Jh73K/8/

I want to have a slider bar on the page with 10 dots. "items.slider". I want each item in slider to be a DOT. All the 10 dots are visible all the time with only 1 dot having the focus. The focus changes every 5 secs to the next dot. At the end of the list, focus goes back to the first dot.

I was trying to have a canvas and create 10 small circles in it etc.

How can I do this best?

As asked for: http://jsfiddle.net/Jh73K/8/

最满意答案

请看这里的链接。 您可以使用相同的CSS / HTML，然后使用以下javascript来更改活动项目。 请记住，下面的代码是针对该链接中提到的HTML。

$(document).ready(function() { setInterval(function() { var o = $("ol.pagination").find(".on").removeClass("on"); if ($(o).is(':last-child')) $("ol.pagination").find("li:first-child").addClass("on"); else $(o).next().addClass("on"); }, 5000); });

看看这是不是你想要的。 编辑：顺便说一句，这是一个相同的小提琴： http ： //jsfiddle.net/W8kZf/ 。

Look at this link here. You can use the same CSS/HTML and then the following javascript to change the active item. Remember the code below is for the HTML mentioned in that link.

$(document).ready(function() { setInterval(function() { var o = $("ol.pagination").find(".on").removeClass("on"); if ($(o).is(':last-child')) $("ol.pagination").find("li:first-child").addClass("on"); else $(o).next().addClass("on"); }, 5000); });

​See if this is what you want. EDIT: By the way, here's a fiddle for the same: http://jsfiddle.net/W8kZf/.