懂JS的来帮忙看下滑动门

Question

本帖最后由 M_arlboro 于 2009-10-07 13:51:13 编辑

Answer 1

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
ul.nave {float:none; width:100%; margin:0 auto}
ul.nave li { display:inline;}.dis{display:block;} 
.undis{display:none;} </style>
<script type="text/javascript" language="javascript"> 
function g(o){return document.getElementById(o);} 
function HoverLi(n) 
{ 
for(var i=1;i<=4;i++){g('tb_'+i);g('tbc_0'+i).className='undis';} 
g('tbc_0'+n).className='dis';g('tb_'+n);
m = n;
} 
function MM_swapImgRestore(){}
function MM_swapImage(){}var m = 1;
window.onload=function(){
setInterval(function(){
HoverLi(m);
MM_swapImage('Z_'+m,'','images/list1_link1.jpg',1)
m++;
if(m==5) m=1;
}, 2000);

}</script> <div class="tb_ tabs" id="tb_">
                            <ul class="nave">
                            <li id="tb_1">
                            <img alt="" src="images/list1_divider.jpg" />
                            <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="HoverLi(1),MM_swapImage('Z_1','','images/list1_link1.jpg',1)"><img id="Z_1"  border="0" alt="测试one" osrc="images/list1_link4.jpg" src="images/list1_link4.jpg" /></a>
                            </li>
                            <li id="tb_2">
                            <img alt="" src="images/list1_divider.jpg" />
                            <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="HoverLi(2),MM_swapImage('Z_2','','images/list1_link1.jpg',1)"><img id="Z_2"  border="0" alt="测试two" osrc="images/list1_link4.jpg" src="images/list1_link4.jpg" /></a>
                             </li>
                              <li id="tb_3">
                            <img alt="" src="images/list1_divider.jpg" />
                            <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="HoverLi(3),MM_swapImage('Z_3','','images/list1_link1.jpg',1)"><img id="Z_3"  border="0" alt="测试three" osrc="images/list1_link4.jpg" src="images/list1_link4.jpg" /></a>
                             </li>
                              <li id="tb_4">
                            <img alt="" src="images/list1_divider.jpg" />
                            <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="HoverLi(4),MM_swapImage('Z_4','','images/list1_link1.jpg',1)"><img id="Z_4"  border="0" alt="测试four" osrc="images/list1_link4.jpg" src="images/list1_link4.jpg" /></a>
                            <img alt="" src="images/list1_divider.jpg" /></li>
                            </ul>
</div><div class="dis" id="tbc_01"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer sed erat. Duis convallis. Pellentesque justo. Duis <a href="#">broadband</a> at odio. Fusce pede. <a href="#">Dial up</a> felis. Nulla mauris. Cras<br />
                          cursus augue <a href="#">1 Phone</a> a metus facilisis ullamcorper. <a href="#">Hosting</a> Donec in dui quis arcu tempor tempor. Sed volutpat consectetuer lorem. Aenean non turpis ac nisi scelerisque pulvinar.<br /> 
                          Cras</p></div>
                          <div class="undis" id="tbc_02"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer sed erat. Duis convallis. Pellentesque justo. Duis <a href="#">broadband</a> at odio. Fusce pede. <a href="#">Dial up</a> felis. Nulla mauris. Cras<br />
                          cursus augue <a href="#">2 Phone</a> a metus facilisis ullamcorper. <a href="#">Hosting</a> Donec in dui quis arcu tempor tempor. Sed volutpat consectetuer lorem. Aenean non turpis ac nisi scelerisque pulvinar.<br /> 
                          Cras</p></div>
                          <div class="undis" id="tbc_03"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer sed erat. Duis convallis. Pellentesque justo. Duis <a href="#">broadband</a> at odio. Fusce pede. <a href="#">Dial up</a> felis. Nulla mauris. Cras<br />
                          cursus augue <a href="#">3 Phone</a> a metus facilisis ullamcorper. <a href="#">Hosting</a> Donec in dui quis arcu tempor tempor. Sed volutpat consectetuer lorem. Aenean non turpis ac nisi scelerisque pulvinar.<br /> 
                          Cras</p></div>
                          <div class="undis" id="tbc_04"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer sed erat. Duis convallis. Pellentesque justo. Duis <a href="#">broadband</a> at odio. Fusce pede. <a href="#">Dial up</a> felis. Nulla mauris. Cras<br />
                          cursus augue <a href="#">4 Phone</a> a metus facilisis ullamcorper. <a href="#">Hosting</a> Donec in dui quis arcu tempor tempor. Sed volutpat consectetuer lorem. Aenean non turpis ac nisi scelerisque pulvinar.<br /> 
                          Cras</p></div>