<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body>
<!--one start--> <div id="yp_card1" class="pro_con" style="display:block" >
<div class="hei"> <div id="pro_left"><a href="#" onclick="changeMc(1,3)"><img src="images/left.gif" border="0" /></a></div> <div onmouseover="changeMc(1,1)" onmouseout="hi()" id="pro_center" ><img src="images/navimg.gif" /></div> <div id="pro_right"><a href="#" onclick="changeMc(1,2)"><img src="images/right.gif" border="0" /></a></div> </div> <div id="pro_nub"> <span onmouseover="changeMc(1,3)" onmouseout="hi()"><a href="#" class="over">1</a></span> <span onmouseover="changeMc(1,2)" onmouseout="hi()" ><a href="#">2</a></span> <span onmouseover="changeMc(1,1)" onmouseout="hi()"><a href="#">3</a></span> </div> </div> <!--end--> <!--two start--> <div id="yp_card2" class="pro_con" style="display:none" >
<div class="hei"> <div id="pro_left"><a href="#" onclick="changeMc(2,1)"><img src="images/left.gif" border="0" /></a></div> <div onmouseover="changeMc(2,2)" onmouseout="hi()" id="pro_center" ><img src="images/navimg2.gif" /></div> <div id="pro_right"><a href="#" onclick="changeMc(2,3)"><img src="images/right.gif" border="0" /></a></div> </div> <div id="pro_nub"> <span onmouseover="changeMc(2,3)" onmouseout="hi()"><a href="#">1</a></span> <span onmouseover="changeMc(2,2)" onmouseout="hi()" ><a href="#" class="over">2</a></span> <span onmouseover="changeMc(2,1)" onmouseout="hi()"><a href="#">3</a></span> </div> </div> <!--end--> <!--three start-->
<div id="yp_card3" class="pro_con" style="display:none" >
<div class="hei"> <div id="pro_left"><a href="#" onclick="changeMc(3,2)"><img src="images/left.gif" border="0" /></a></div> <div onmouseover="changeMc(3,3)" onmouseout="hi()" id="pro_center" ><img src="images/navimg3.gif" /></div> <div id="pro_right"><a href="#" onclick="changeMc(3,1)"><img src="images/right.gif" border="0" /></a></div> </div> <div id="pro_nub"> <span onmouseover="changeMc(3,3)" onmouseout="hi()"><a href="#">1</a></span> <span onmouseover="changeMc(3,2)" onmouseout="hi()" ><a href="#">2</a></span> <span onmouseover="changeMc(3,1)" onmouseout="hi()"><a href="#" class="over">3</a></span> </div> </div> <!--end--> <script language="javascript" type="text/javascript"> <!-- var s=3; var t=3000;//循环周期(1秒) var timer; function changeMc(x,y){ // x是当前显示的层 y是即将显示的层 clearTimeout(timer); if (x!=y){ document.getElementById('yp_card'+x).style.display = "none"; document.getElementById('yp_card'+y).style.display = "block"; s=y } } function hi(){ timer=setTimeout("sh()",t) } function sh(){ s=(s>=3)?1:s+1 for (var i=1;i<=3;i++){ document.getElementById("yp_card"+i).style.display = "none"; } document.getElementById("yp_card"+s).style.display = "block" timer=setTimeout("sh()",t) } sh() --> </script> <style>
.about{ width:284px; height:200px; float:left;}
.type_bg{ height:22px; } .aboutimg{ float:left; width:161px; margin-top:20px; border-right:dashed 1px #ccc; padding-right:20px;} .about_content{ float:right; width:90px; line-height:25px; margin-top:20px; list-style:none;} .mar{ margin-left:28px;} .pro_con{ margin-top:10px; height:115px; padding:10px; padding-top:5px;} #pro_left{ width:4px; float:left; margin-left:25px; padding-top:55px;} #pro_center{ width:191px; float:left; margin-left:10px;} #pro_right{ width:4px; float:left; margin-left:10px; padding-top:55px;} #pro_nub{ padding-left:200px; font-family:Geneva, Arial, Helvetica, sans-serif;} a.over{font-size:12px; text-decoration:none; color:#35A130} .hei{ height:130px;} </style>
</body> </html> |
|