Question

I am currently applying an “active” class to a set of list items. You can see the fiddle here:

http://jsfiddle.net/y9h5q/906/

EDIT: Here’s the 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>

…and here’s the javascript:

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

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

I’d like for setInterval to only run once, stopping after the very last list item.

I’m not sure whether to use setInterval or setTimeout?

Answer 1

You mean like this: http://jsfiddle.net/xELsc/ ?

[Edit: added the script]
Change your js like this:

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