打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
js图片切换1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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>
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
可拖动的菜单
给DIV添加滚动条
DIV+CSS导航菜单代码,挺不错的。共享下 - 《八零年代》.NET之家 - 博客园
经典表格
滑出式网页导航菜单
blog中加入滚动菜单的代码
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服