基于jQuery实现仿百度首页换肤背景图片切换代码

<a href="#">换肤</a><div class="heitiao"></div><div class="con"><img src="images/content.png" /></div><div class="head"> <div class="menu">  <div class="title">   <p class="p1"></p>   <p class="p2"></p>  </div> <div class="bg"> <div class="bgcon">  <img class="big" src="images/bg0s.jpg">  <img src="images/bg1s.jpg">  <img src="images/bg2s.jpg">  <img src="images/bg3s.jpg">  <img src="images/bg4s.jpg">  <img src="images/bg5s.jpg">  <img class="big" src="images/bg6s.jpg">  <img src="images/bg7s.jpg">  <img src="images/bg8s.jpg">  <img class="last" src="images/bg9s.jpg">  <img class="last" src="images/bg10s.jpg">  <img class="last" src="images/bg11s.jpg"> </div>  <div class="bgyl">   <img src="images/yl.png">  </div> </div> </div> </div> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript">   var i=1;   $("a").click(function(){    $(".head").animate({height:"288px"},500);    });   $(".p2").click(function(){    $(".head").animate({height:"0px"},500);    });   $(".bgcon img").hover(function(){    i=$(this).index();    $(".bgyl").css("background",'url(images/bg'+i+'.jpg)');    $(".bgyl").css("background-size","264px 180px");    });   $(".bgcon img").click(function(){    $("body").css("background",'url(images/bg'+i+'.jpg)');    }); </script>

*{margin:0;padding:0} a{color:#fff; margin-top:10px; display:block; margin-left:18%; font-size:13px; position:absolute; } body{background:url(images/bg0.jpg);} .con{width:911px;   height:317px;   margin:50px auto;} .head{width:100%;   height:0px;   background:#fff;   position:fixed;   left:0px;   top:0px;   border-bottom:1px solid #e3e3e3;   overflow:hidden;   } .title{width:911px;   height:45px;   margin:0px auto;}   .heitiao{width:100%;    height:35px;    background:rgba(0,0,0,0.7);    } .menu{width:100%;   height:45px;   border-bottom:1px solid #e3e3e3;} .p1{width:861px;  height:45px;  background:url(images/p1.png);  float:left;  cursor:pointer;} .p2{width:50px;  height:45px;  background:url(images/sp.png);  float:right;  cursor:pointer;  } .bg{width:911px;  height:205px;  margin:25px auto;} .bgcon{width:590px;   height:190px;   float:left;   } .bgcon img{width:97px;    height:59px;    display:block;    float:left;    margin-right:1px;    margin-bottom:1px;    } .bgcon .big{width:195px;    height:119px;} .bgcon .last{position:relative;     top:-60px;     } .bgyl{width:264px;   height:180px;   float:right;   background:url(images/bg1s.jpg);   background-size:294px;}