当前位置:Gxlcms > JavaScript > 基于jQuery实现仿百度首页换肤背景图片切换代码_jquery

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

时间:2021-07-01 10:21:17 帮助过:5人阅读

不多说了,先给大家展示效果图,本文支持源码下载哦,需要的朋友可以直接下载使用,代码很简单哦~

在线预览 源码下载

html代码:

  1. 换肤
  2. <div class="heitiao"></div>
  3. <div class="con"><img src="https://www.gxlcms.com/images/content.png"></div>
  4. <div class="head">
  5. <div class="menu">
  6. <div class="title">
  7. <p class="p1"></p>
  8. <p class="p2"></p>
  9. </div>
  10. <div class="bg">
  11. <div class="bgcon">
  12. <img class="big" src="https://www.gxlcms.com/images/bg0s.jpg">
  13. <img src="https://www.gxlcms.com/images/bg1s.jpg">
  14. <img src="https://www.gxlcms.com/images/bg2s.jpg">
  15. <img src="https://www.gxlcms.com/images/bg3s.jpg">
  16. <img src="https://www.gxlcms.com/images/bg4s.jpg">
  17. <img src="https://www.gxlcms.com/images/bg5s.jpg">
  18. <img class="big" src="https://www.gxlcms.com/images/bg6s.jpg">
  19. <img src="https://www.gxlcms.com/images/bg7s.jpg">
  20. <img src="https://www.gxlcms.com/images/bg8s.jpg">
  21. <img class="last" src="https://www.gxlcms.com/images/bg9s.jpg">
  22. <img class="last" src="https://www.gxlcms.com/images/bg10s.jpg">
  23. <img class="last" src="https://www.gxlcms.com/images/bg11s.jpg">
  24. </div>
  25. <div class="bgyl">
  26. <img src="https://www.gxlcms.com/images/yl.png">
  27. </div>
  28. </div>
  29. </div>
  30. </div>

css代码:

  1. *{margin:0;padding:0}
  2. a{color:#fff;
  3. margin-top:10px;
  4. display:block;
  5. margin-left:18%;
  6. font-size:13px;
  7. position:absolute;
  8. }
  9. body{background:url(images/bg0.jpg);}
  10. .con{width:911px;
  11. height:317px;
  12. margin:50px auto;}
  13. .head{width:100%;
  14. height:0px;
  15. background:#fff;
  16. position:fixed;
  17. left:0px;
  18. top:0px;
  19. border-bottom:1px solid #e3e3e3;
  20. overflow:hidden;
  21. }
  22. .title{width:911px;
  23. height:45px;
  24. margin:0px auto;}
  25. .heitiao{width:100%;
  26. height:35px;
  27. background:rgba(0,0,0,0.7);
  28. }
  29. .menu{width:100%;
  30. height:45px;
  31. border-bottom:1px solid #e3e3e3;}
  32. .p1{width:861px;
  33. height:45px;
  34. background:url(images/p1.png);
  35. float:left;
  36. cursor:pointer;}
  37. .p2{width:50px;
  38. height:45px;
  39. background:url(images/sp.png);
  40. float:right;
  41. cursor:pointer;
  42. }
  43. .bg{width:911px;
  44. height:205px;
  45. margin:25px auto;}
  46. .bgcon{width:590px;
  47. height:190px;
  48. float:left;
  49. }
  50. .bgcon img{width:97px;
  51. height:59px;
  52. display:block;
  53. float:left;
  54. margin-right:1px;
  55. margin-bottom:1px;
  56. }
  57. .bgcon .big{width:195px;
  58. height:119px;}
  59. .bgcon .last{position:relative;
  60. top:-60px;
  61. }
  62. .bgyl{width:264px;
  63. height:180px;
  64. float:right;
  65. background:url(https://www.gxlcms.com/images/bg1s.jpg);
  66. background-size:294px;}

以上代码就是本文介绍基于jQuery实现仿百度首页换肤背景图片切换代码,希望大家喜欢。

人气教程排行