<strong><span style="font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
*{margin:0px 0px ; padding:0px 0px ;}
body{
background-color:#000;position:relative;
}
#Mybg{width:1300px;height:700px;/*border:1px solid #FFCC33;*/ margin:3px auto; position:relative;
box-shadow:2px 2px 8px #FFCC33 ;}
#Mybg img{width:1300px;height:700px;}
#Mybg .title{width:220;height:120px;/*border:1px solid #FFCC33 ;*/
position:absolute;top:10px;left: 956px;
background:rgba(0,0,0,0.3);box-shadow:3px 2px 15px #000000;border-radius:4px;}
#Mybg .title img{width:220;height:120px;}
#Mybg .title :hover{border:0.5px solid #000 ;border-radius:4px;}
#Mybg .Put{width:1000px ;height:32px;/*border:1px solid #FFF;*/position:absolute;top:148px;left:150px;}
#Mybg .Put .tip{display:block;width:110px ;height:32px;/*border:1px solid #CC0000;*/
position:absolute;bottom:0px ;left:450px;box-shadow:0.5px 0.5px 4px rgba(0, 0, 0, 0.5);}
#Mybg .Put .tip img{width:110px ;height:32px;}
#Mybg .Put .tip:hover{box-shadow:2px 2px 15px #000000;}
/*<!--body-->*/
#Mybg .Mybody{display:block;width:1000px;height:430;border:1px solid #006600;
position:absolute;top:200px;left:150px;box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);}
#Mybg .Mybody .M-left{display:block;width:225px;height:307px;
border:1px solid #FFCCCC;box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
margin:3px 13px;float:left;}
#Mybg .Mybody .M-left ul {list-style:none;float:left;flowover:hidden}
#Mybg .Mybody .M-left li.fir{width:225;height:112;border:1px solid #B96AEE;
background:url("img/q2.jpg");
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);border:1px solid #000;}
#Mybg .Mybody .M-left .fir:hover{/*background:url("img/q2.jpg");*/
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);}
#Mybg .Mybody .M-left li.fir img{width:225px;height:112px;}
#Mybg .Mybody .M-left li.lst1{width:225px;height:65px;border:1px solid #B96AEE;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);}
#Mybg .Mybody .M-left li.lst1 img{width:225px;height:65px;}
#Mybg .Mybody .M-left li.lst2{width:225px;height:65px;border:1px solid #B96AEE;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);}
#Mybg .Mybody .M-left li.lst2 img{width:225px;height:65px;}
#Mybg .Mybody .M-left li.lst3{width:225px;height:65px;border:1px solid #B96AEE;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);}
#Mybg .Mybody .M-left li.lst3 img{width:225px;height:65px;}
#Mybg .Mybody .M-center{display:block;width:490px;height:307px;background:rgba(0, 0, 0, 0.6);
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
border:1px solid #6699FF;position:absulute;float: left;margin:3px 0px;}
#Mybg .Mybody .M-center ul {display:block;width:470px;height:287px;
margin:10px 10px;list-style:none;
border-radius:5px;overflower:hidden;box-shadow:1px 1px 4px rgba(125, 125, 125, 0.8);position:relative;}
#Mybg .Mybody .M-center .pic {width:470px;height:287px;margin:10px 10px;opacity:1;
border-radius:6px;overflow:hidden;position:relative;float:left;}
#Mybg .Mybody .M-center .pic:hover{border:1px solid #FFCC00;box-shadow:2px 2px 8px rgba(189, 0, 0, 0.8);}
#Mybg .Mybody .M-center .pic img{width:470px;height:287px;position:absolute;left:1000px;}
#Mybg .Mybody .M-center .but1 {display:block;width:50px;height:88px;/*border:1px solid #FFF;*/position:absolute;
margin-top:106px;margin-left:1px;background:rgba(0, 0, 0, 0.4);
box-shadow:1px 1px 5px rgba(157, 157,9, 0.4);border-radius:5px;overflow:hidden;}
#Mybg .Mybody .M-center .but1 img{width:50px;height:88px;
box-shadow:1px 1px 5px rgba(157, 157,9, 0.6);
opacity:0.1;
filter:alpha(opacity=3);
-moz-opacity:0.1;
}
#Mybg .Mybody .M-center .but1:hover img{
opacity:0.5;
filter:alpha(opacity=3);
-moz-opacity:0.5;}
#Mybg .Mybody .M-center .but2 {display:block;width:50px;height:88px;/*border:1px solid #FFF;*/position:absolute;
margin-left:437px;margin-top:107px;background:rgba(0, 0, 0, 0.4);
box-shadow:1px 1px 5px rgba(157, 157,9, 0.4);border-radius:5px;overflow:hidden;}
#Mybg .Mybody .M-center .but2 img{width:50px;height:88px;
opacity:0.1;
filter:alpha(opacity=3);
-moz-opacity:0.1;}
#Mybg .Mybody .M-center .but2:hover img{
background:rgba(0,0, 0, 0.6);
box-shadow:1px 1px 5px rgba(157, 157,9, 0.6);
opacity:0.5;
filter:alpha(opacity=3);
-moz-opacity:0.5;}
#Mybg .Mybody .M-right{display:block;width:225px;height:307px;box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
border:1px solid #CCFF99;position:absulute;float: left;margin:3px 13px;}
#Mybg .Mybody .M-right .lin1{display:block;width:225px;height:176px;
/*border:1px solid #CCFF99;*/margin:2px 0px;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);}
#Mybg .Mybody .M-right .lin1 img{width:225px;height:176px;}
#Mybg .Mybody .M-right .lin1:hover{box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.8);}
#Mybg .Mybody .M-right .lin2{display:block;width:225px;height:120px;
/*border:1px solid #CCFF99;*/margin:2px 0px;
border:1px solid #CCFF99;margin:3px 0px;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);}
#Mybg .Mybody .M-right .lin2 img{width:225px;height:120px;}
#Mybg .Mybody .M-right .lin2:hover{box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.8);}
#Mybg .Mybody .M-bottom{width:970px;height:110px;
box-shadow:1px 1px 5px rgba(0,0,0,0.5);
border:1px solid #F464EA;/*float:left;left:0px;bottom:0px;*/margin:315px 13px;}
#Mybg .Mybody .M-bottom .po1{width:240px;height:110px;
box-shadow:1px 1px 5px rgba(0,0,0,0.5);
border:1px solid #99FF33;float:left;margin:0px 0.2px;}
#Mybg .Mybody .M-bottom .po1 img{width:240px;height:110px;}
#Mybg .Mybody .M-bottom .po2{width:240px;height:110px;
box-shadow:1px 1px 5px rgba(0,0,0,0.5);
border:1px solid #99FF33;float:left;margin:0px 0.2px;}
#Mybg .Mybody .M-bottom .po2 img{width:240px;height:110px;}
#Mybg .Mybody .M-bottom .po3{width:240px;height:110px;
box-shadow:1px 1px 5px rgba(0,0,0,0.5);
border:1px solid #99FF33;float:left;margin:0px 0.2px;}
#Mybg .Mybody .M-bottom .po3 img{width:240px;height:110px;}
#Mybg .Mybody .M-bottom .po4{width:240px;height:110px;
box-shadow:1px 1px 5px rgba(0,0,0,0.5);
border:1px solid #99FF33;float:left;margin:0px 0.2px;}
#Mybg .Mybody .M-bottom .po4 img{width:240px;height:110px;}
</style>
</head>
<body>
<div id="Mybg">
<img src="img/bg2.jpg" />
<div class="title" ><img src="img/00.png"/></div>
<div class="Put">
<div class="tip"><a href="#"><img src="img/q1.jpg"/></a></div>
</div>
<div class="Mybody">
<div class="M-left">
<ul>
<li class="fir"><a href="#"><img src="img/q2.jpg"/></a></li>
<li class="lst1"><a href="#"><img src="img/q222.jpg"/></a></li>
<li class="lst2"><a href="#"><img src="img/q4.jpg"/></a></li>
<li class="lst3"><a href="#"><img src="img/q5.jpg"/></a></li>
</ul>
</div>
<div class="M-center">
<div class=pic>
<img src="img/a1.jpg" style="left:0px;" />
<img src="img/a2.jpg"/>
<img src="img/a3.jpg"/>
<img src="img/a4.jpg"/>
<img src="img/a5.jpg"/>
<img src="img/a6.jpg"/>
<img src="img/a7.jpg"/>
<img src="img/a8.jpg"/>
<img src="img/a9.jpg"/>
<img src="img/a10.jpg"/>
<img src="img/a11.jpg"/>
</div>
<div class="but1"><a href="#"><img src="img/left1.jpg"></a></div>
<div class="but2"><a href="#"><img src="img/right1.jpg"></a></div>
</div>
<div class="M-right">
<div class="lin1"><a href="#"><img src="img/q6.jpg"/></a></div>
<div class="lin2"><a href="#"><img src="img/q66.jpg"/></a></div>
</div>
<div class="M-bottom">
<a class="po1" href="#"><img src="img/q7.jpg "/></a>
<a class="po2" href="#"><img src="img/q11.jpg"/></a>
<a class="po3" href="#"><img src="img/p12.jpg"/></a>
<a class="po4" href="#"><img src="img/p13.jpg"/></a>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" >
$("#Mybg .Mybody .M-left li.lst1").hover(
function(){
$(this).find("img").attr("src","img/q3.jpg");},
function(){
$(this).find("img").attr("src","img/q222.jpg");}
);
$("#Mybg .Mybody .M-left li.lst2").hover(
function(){
$(this).find("img").attr("src","img/q33.jpg");},
function(){
$(this).find("img").attr("src","img/q4.jpg");}
);
$("#Mybg .Mybody .M-left li.lst3").hover(
function(){
$(this).find("img").attr("src","img/q55.jpg");},
function(){
$(this).find("img").attr("src","img/q5.jpg");}
);
//-------------------------------------------------
$("#Mybg .Mybody .M-bottom .po1").hover(
function(){
$(this).find("img").attr("src","img/q77.jpg");},
function(){
$(this).find("img").attr("src","img/q7.jpg");}
);
$("#Mybg .Mybody .M-bottom .po2").hover(
function(){
$(this).find("img").attr("src","img/q111.jpg");},
function(){
$(this).find("img").attr("src","img/q11.jpg");}
);
$("#Mybg .Mybody .M-bottom .po3").hover(
function(){
$(this).find("img").attr("src","img/q122.jpg");},
function(){
$(this).find("img").attr("src","img/p12.jpg");}
);
$("#Mybg .Mybody .M-bottom .po4").hover(
function(){
$(this).find("img").attr("src","img/q133.jpg");},
function(){
$(this).find("img").attr("src","img/p13.jpg");}
);
//------------------------------------------------------------
var a =0;
var b =0;
$(" #Mybg .Mybody .M-center .but1 ").click(function(){
a++;
if(a>=10){
a=0;
}
$("#Mybg .Mybody .M-center .pic img").eq(a).css("left","470px");
$("#Mybg .Mybody .M-center .pic img").eq(a).animate({left:"0px"},500);
$("#Mybg .Mybody .M-center .pic img").eq(b).animate({left:"-470px"},500);
b=a;
});
$(" #Mybg .Mybody .M-center .but2 ").click(function(){
a--;
if(a<=-1){
a=10;b=0;
}
$("#Mybg .Mybody .M-center .pic img").eq(a).css("left","-470px");
$("#Mybg .Mybody .M-center .pic img").eq(a).animate({left:"0px"},500);
$("#Mybg .Mybody .M-center .pic img").eq(b).animate({left:"470px"},500);
b=a;
});
function ao(){
setInterval(function(){
a++;
$("#Mybg .Mybody .M-center .pic img").eq(a).css("left","-470px");
$("#Mybg .Mybody .M-center .pic img").eq(a).animate({left:"0px"},500);
$("#Mybg .Mybody .M-center .pic img").eq(b).animate({left:"470px"},500);
b=a;
if(a==10){a=0};
},4000);
};
ao();
</script>
</body>
</html>
</span></strong>
原文地址：http://blog.csdn.net/u012651389/article/details/43940279
