Javascript内容旋转器?

dif*_*ent 2 javascript

我已经完成了内容旋转器的基础知识,唯一的问题是它不会将自身循环回到开头,我无法弄清楚原因!这是一个非常简单的javascript脚本:

window.onload = function() { setInterval("transition()", 5000); }

    function transition()
    {
        var y = document.getElementById("featured").getElementsByTagName("li");
        for (var i=0;i<y.length;i++)
        {
            if (y[i].className == "current")
            {
                y[(i+1)].className = "current";
                y[i].className = "";
                break;
            }
        }
    }
Run Code Online (Sandbox Code Playgroud)

它一直停在列表的末尾,基本上我只想让它循环.有帮助吗?

Poi*_*nty 6

通过利用Javascript的优秀语言,您可以使这更聪明一些:

window.onload = function() {
  var y = document.getElementById('featured').getElementsByTagName('li');
  var ylen = y.length, index = 0;
  y[0].className = 'current';
  setInterval(function() {
    y[index].className = '';
    index = (index + 1) % ylen;
    y[index].className = 'current';
  }, 5000);
};
Run Code Online (Sandbox Code Playgroud)

当您预先定义<li>类似的元素列表时,您为间隔计时器提供的函数可以在每次计时器触发时引用它们.该index变量递增,直到它击中了数组的结尾,然后它会被重新设置为零.