现在大多数列表切换都是把<div style="display:block"></div> 这个div的display设置为none或block来实现的，就是你点击一个列表的时候这个列表所要表现的div的display变为block，其他的设置为none,所以看到了这个列表的东西反之亦然<script><!-- function setTab(name,cursel,n){ for(i=1i<=ni++){ 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> <style type="text/css"> <!-- body,div,ul,li{ padding:0 text-align:center } body{ font:12px "宋体" text-align:center } a:link{ color:#00F text-decoration:none } a:visited { color: #00F text-decoration:none } a:hover { color: #c00 text-decoration:underline } ul{ list-style:none} #Tab1{ width:460px margin:0px padding:0px .Menubox { width:100% background:url(image.gif) height:28px line-height:28px } .Menubox ul{ margin:0px padding:0px } .Menubox li{ float:left display:block cursor:pointer width:114px text-align:center color:#949694 font-weight:bold } .Menubox li.hover{ padding:0px background:#fff width:116px border-left:1px solid #A8C29F border-top:1px solid #A8C29F border-right:1px solid #A8C29F background:url(imagehover.gif) color:#739242 font-weight:bold height:27px line-height:27px } .Menubox_on { padding:0px background:#fff width:116px border-left:1px solid #A8C29F border-top:1px solid #A8C29F border-right:1px solid #A8C29F background:url(imagehover.gif) color:#739242 font-weight:bold height:27px line-height:27px } .Contentbox{ clear:both margin-top:0px border:1px solid #A8C29F border-top:none height:181px text-align:center padding-top:8px } --> </style> <div id="Tab1"> <div class="Menubox"> <ul> <li id="one1" onmouseover="setTab('one',1,4)" class="Menubox_on" >新闻1</li> <li id="one2" onmouseover="setTab('one',2,4)" >新闻2</li> <li id="one3" onmouseover="setTab('one',3,4)">新闻3</li> <li id="one4" onmouseover="setTab('one',4,4)">新闻4</li> </ul> </div> <div class="Contentbox"> <div id="con_one_1" ><table width="200" border="0" cellspacing="0" cellpadding="0"><tr><td>11111</td><td>22222</td></tr><tr><td>33333</td><td>44444</td></tr></table></div> <div id="con_one_2" style="display:none">新闻列表2</div> <div id="con_one_3" style="display:none">新闻列表3</div> <div id="con_one_4" style="display:none">新闻列表4</div> </div> </div>
可以先循环一遍 li ，将里面的img都display:none掉，或者直接在img标签内添加 style="display:none"属性（Js一开始就先显示第一张图片就OK的），具体看如下代码所示：
<script type="text/javascript" src="jquery.js"></script>
<div class='box'>
<li><img src="images/demo.jpg" width="200" height="200" border="0" alt=""></li>
<li><img src="images/demo1.jpg" width="200" height="200" border="0" alt=""></li>
<li><img src="images/demo.jpg" width="200" height="200" border="0" alt=""></li>
<li><img src="images/demo1.jpg" width="200" height="200" border="0" alt=""></li>
<li><img src="images/demo.jpg" width="200" height="200" border="0" alt=""></li>
<li><img src="images/demo1.jpg" width="200" height="200" border="0" alt=""></li>
</div>
<script type="text/javascript">
$(document).ready(function(){
// 先隐藏所有的 [ 或者直接在img后面加style="display:none" ]
$('.box').find('li').each(function(){
$(this).hide()
})
// 显示第一个
$('.box').find('li:first').show()
setInterval(function(){
$('div.box li').eq(0).appendTo('div.box')
$('div.box li').hide()
$('div.box li').eq(0).slideDown('slow')
}, 3000)
})
</script>
复制粘贴一下，将jQuery类库地址改一下，将图片地址改一下，测试一下，看看是否OK！
