javascrit手风琴效果程序代码

2021-01-07 11:37

<script>

var timeout2=;  //切换时间

var timeout3=10000; //mouse over 后切换时间

var now_content=0;

var total_content=3;

var way=1;

var start_content=Math.round(Math.random()*(total_content-1))+1; //除广告为第一显示外

function content_mouse(num){

 now_content=num;

 window.clearInterval(theTimer2);   

 for (var i=1;i<=total_content;i++){

 document.getElementById(divhl0+i).style.display=none;

 //document.getElementById(pic+i).style.background=url("huabizc/+i+.jpg");

 document.getElementById(pic+i).style.backgroundPosition=0px 0px;

 }

 document.getElementById(divhl0+num).style.display=block;

 //document.getElementById(pic+num).style.background=url("huabizc/+num+.jpg");

 document.getElementById(pic+num).style.backgroundPosition=-50px 0px;

 theTimer2=setTimeout(change_content(), timeout3);

}

function change_content(){

 for (var i=1;i<=total_content;i++){

 document.getElementById(divhl0+i).style.display=none;

 }

 document.getElementById(divhl0+now_content).style.display=block;

 if (way) now_content++;

 else now_content--;

 if(now_content>total_content) {now_content=total_content-1;way=0;}

 else if(now_content==0) {now_content=1;way=1;}

 theTimer2=setTimeout(change_content(), timeout2);

}

theTimer2=setTimeout(function(){now_content=1;change_content();}, timeout2);

</script>

<div class="director">

        <table width="619" border="0" cellpadding="0" cellspacing="0">

          <tr>

            <td>

            <table border="0" cellpadding="0" cellspacing="0">

              <tr>

              <td onclick="content_mouse(1)" valign="top" class="pdboder"><table width="20" border="0" cellpadding="0" cellspacing="0">

                    <tr>

                      <td width="50"><a href="###" class="title1" target="_self" id="pic1"></a></td>

                    </tr>

                </table></td>

                <td width="619" height="500" valign="top"><div id="divhl01" style="display:none;">

                    <div class="accordion">

                        <dl class="clearfix">

                        <dt><a href="#" target="_self"></a></dt>

                        <dd class="d1">

                          <img  src="/newstopic/huabizc/author.jpg" alt="" title="" />

                            <a href="/news/zhuantipindao/2011/" target="_self"><img  src="2013/01/10/201715.jpg" alt="" title="" /></a></dd>

                    </dl>

                    </div>

                </div></td>

                <td onclick="content_mouse(2)" valign="top" class="pdboder"><table width="20" border="0" cellpadding="0" cellspacing="0">

                    <tr>

                      <td width="50"><a href="###" target="_self" class="title1" id="pic2"></a></td>

                    </tr>

                </table></td>

                <td width="619" height="500"><div id="divhl02" style="display:none;">

                    <div class="accordion2">

                        <dl class="clearfix">

                        <dt><a href="#" target="_self"></a></dt>

                        <dd class="d1">

                          <img  src="/newstopic/huabizc/author2.jpg" alt="" title="" />

                            <a href="/news/zhuantipindao/2011/" target="_self"><img  src="/newstopic/huabizc/exclusive2.jpg" alt="" title="" /></a>        

                        </dd>

                    </dl>

                    </div>

                </div></td>

                <td onclick="content_mouse(3)" valign="top" class="pdboder"><table width="20" border="0" cellpadding="0" cellspacing="0">

                    <tr>

                      <td width="50"><a href="###" target="_self" class="title1" id="pic3"></a></td>

                    </tr>

                </table></td>

                <td width="619" height="500"><div id="divhl03">

                    <div class="accordion3">

                        <dl class="clearfix">

                        <dt><a href="#" target="_self"></a></dt>

                        <dd class="d1">

                          <img  src="/newstopic/huabizc/author3.jpg" alt="" title="" />

                            <a href="/news/zhuantipindao/2011/" target="_self"><img  src="2013/01/10/207520.jpg" alt="" title="" /></a>        

                        </dd>

                    </dl>

                    </div>

                </div></td>

                <td  class="pdboder"><table width="20" border="0" cellpadding="0" cellspacing="0">

                    <tr>

                      <td><a href="#" target="_self" class="title1"><img  src="/huabizc/4.jpg" /></a></td>

                    </tr>

                </table></td>

                <td  class="pdboder"><table width="20" border="0" cellpadding="0" cellspacing="0">

                    <tr>

                      <td><a href="#" target="_self" class="title1"><img  src="/newstopic/huabizc/5.jpg" /></a></td>

                    </tr>

                </table></td>

              </tr>

            </table>

            <script language="javascript" src="js/scrollad.js"></script></td>

          </tr>

        </table>

</div> </td>

 </tr>

</table>