Question

我目前正在将一个“活动”类应用于一组列表项。你可以在这里看到小提琴：

编辑：这是HTML：

<div id="slider">
  <ul>
    <li class='active'> a </li>
    <li> b &lt; </li>
    <li> c &lt; </li>    
    <li> d &lt; </li>
    <li> e &lt; </li>
  </ul>
</div>

...这里是javascript：

var toggleSlide = setInterval(function(){
    $("#slider li.active").removeClass().next().add("#slider li:first").last().addClass("active");
},300);

$("li").click(function(){
    clearInterval(toggleSlide);
});

我希望setInterval只运行一次，在最后一个列表项后停止。

我不确定是使用setInterval还是setTimeout？

Answer 1

你的意思是这样的：http://jsfiddle.net/xELsc/？

[编辑：添加脚本]
像这样改变你的js：

var toggleSlide = setInterval( function() {
      $("#slider li.active").removeClass().next().last().addClass("active");
},300);

Answer 2

Here我想出的是：

var toggleSlide = setInterval(function() {
    if ($("#slider li.wasActive").length == $("#slider li").length) {
        clearInterval(toggleSlide);
    } else {
        $("#slider li.active")
            .removeClass("active")
            .addClass("wasActive")
            .next()
            .addClass("active");
    }
    }, 300);

$("li").click(function() {
    clearInterval(toggleSlide);
});

显然不如CrisDeBlonde那么方便和简短，但仍然有效。另外，为了便于阅读，我链接了你的jQuery。

运行setInterval一次然后停止

2 个答案: