Question

求大神帮忙修改JS为自动切换效果

<div class="Tab2">
<div class="lib_huan">
<h4>热门新闻</h4>
<ul>
<li id="tao1" onclick="setTab('tao',1,4)" ></li>
<li id="tao2" onclick="setTab('tao',2,4)"class="hover" ></li>
<li id="tao3" onclick="setTab('tao',3,4)"></li>
<li id="tao4" onclick="setTab('tao',4,4)"></li>
</ul>
</div>
<div class="lib_biao">
<div id="con_tao_1" style="display:none">新闻列表1</div>
<div id="con_tao_2">新闻列表2</div>
<div id="con_tao_3" style="display:none">新闻列表3</div>
<div id="con_tao_4" style="display:none">新闻列表4</div>
</div>
</div>
<script>
<!--
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}

//-->
</script>

Answer 1

<script>
<!--
function setTab(name,cursel,n){
 for(i=1;i<=n;i++){
  var menu=document.getElementById(name+i);
  var con=document.getElementById("con_"+name+"_"+i);
  menu.className=i==cursel?"hover":"";
  con.style.display=i==cursel?"block":"none";
 }
}
var i=1;//从第一个开始循环，你可以改为3
setInterval(function(){setTab("tao",i,4);i++;if(i>4) i=1;},3000);//每三秒切换一次
//-->
</script>

上面的比较简单。只是写太快了，真正要实现你的循环，使用上面这段，这是修改后的。你发现默认第2个，然后切回了第一个，确实是这样的。因为你上面初始是设置第二个为当前状态了，你可以改为第一个，不过也可以将上面代码中的注释的i值改成3，那将从第2个直接过渡到第3个了.

追问

如何能够让它一直循环，不是从一切换到四，然后就不动了，我是想让它按顺序一直循环下去！麻烦哥哥给写个完整的！

追答

其实上面的思路是正确的:

function setTab(name,cursel,n){
 for(i=1;i<=n;i++){
  var menu=document.getElementById(name+i);
  var con=document.getElementById("con_"+name+"_"+i);
  menu.className=i==cursel?"hover":"";
  con.style.display=i==cursel?"block":"none";
 }
}
var curid=3;//从第2个开始,接下来从第3个循环
setInterval(function(){setTab("tao",curid,4);curid+=1;if(curid>4) curid=1;},3000);