基于jQuery的新浪游戏首页幻灯片

分享一款基于jQuery的新浪游戏首页幻灯片，带左右箭头，选项卡缩略图，自动轮播切换的jQuery幻灯片代码。效果图如下：

在线预览    源码下载

实现的代码。

html代码：

Html代码  收藏代码
  1. <br><center>  
  2.         <div class='Homeslide'>  
  3.             <div class='Homeslide_bigwrap'>  
  4.                 <div class='Homeslide_hand0'></div>  
  5.                 <div class='Homeslide_hand1'></div>  
  6.                 <a target='_blank' class='Homeslide_bigpicdiv_mask'>loading...</a>  
  7.                 <div class='Homeslide_bigpicdiv'>  
  8.                     <a href='#' target='_blank'><img src=""></a>  
  9.                 </div>  
  10.                 <div class='Homeslide_detail'>  
  11.                     <p>loading...</p>  
  12.                     <div class='Homeslide_ralate'>loading...</div>  
  13.                 </div>  
  14.             </div>  
  15.             <div class='Homeslide_thumb'>  
  16.                 <ul>loading...</ul>  
  17.             </div>  
  18.         </div>  
  19.     </center>  
  20.     <script type="text/javascript">  
  21.         //data  
  22.         var home_slide_data =  
  23.       [{ "title": "站长素材", "url": "http:\/\/sc.chinaz.com\/", "subtitle": "\u8f66\u6a21\u81ea\u7206\u6c89\u8ff7LOL", "image": "images\/mB6w-fxesftz6773752.jpg", "thumb": "images\/vhPm-fxesfuc3549394.jpg", "summary": "2015\u5e74CJ\u5373\u5c06\u5f00\u5e55\u5728\u5373\uff0c\u867d\u7136\u7531\u4e8e\u79cd\u79cd\u65b0\u89c4\uff0c\u6211\u4eec\u53ef\u80fd\u518d\u4e5f\u89c1\u4e0d\u5230\u79cd\u79cd\u798f\u5229", "related_title_1": "\u6d77\u8d3c\u5973\u5e1d\u5199\u771f", "related_image_1": "http:\/\/sc.chinaz.com\/", "related_title_2": "\u5973\u661f\u4ee3\u8a00\u624b\u6e38", "related_image_2": "http:\/\/sc.chinaz.com\/", "mark": "0" }, { "title": "App Store\u7f16\u8f91\u63a8\u8350\u516d\u6708\u6700\u4f73\u6e38\u620f\u76d8\u70b9", "url": "http:\/\/sc.chinaz.com\/", "subtitle": "\u516d\u6708\u6700\u4f73\u624b\u6e38\u76d8\u70b9", "image": "images\/Hv1z-fxesfty0407358.jpg", "thumb": "images\/T4s2-fxesssr5451139.jpg", "summary": "\u6bcf\u6708App Store\u7684\u7f16\u8f91\u90fd\u4f1a\u5728\u5f53\u6708\u6700\u4ee4\u4eba\u96be\u5fd8\u3001\u5236\u4f5c\u6700\u7cbe\u826f\u7684\u65b0\u4f5c\u4e2d\u627e\u51fa\u6700\u68d2\u7684\u6e38\u620f\uff0c\u4e0b\u9762\u8ba9\u6211\u4e00\u8d77\u6765\u770b\u770b\u6709\u54ea\u4e9b\u6e38\u620f\u5165\u9009\u516d\u6708\u6700\u4f73\u5462\uff1f", "related_title_1": "\u5200\u950b\u9177\u8dd1", "related_image_1": "http:\/\/sc.chinaz.com\/", "related_title_2": "\u8f90\u5c04\u907f\u96be\u6240", "related_image_2": "http:\/\/sc.chinaz.com\/", "mark": "0" }, { "title": "\u9b54\u517d\u4e16\u754c\u7535\u5f71\u9884\u544a\u7247 7\u670811\u65e5\u4eae\u76f8\u5723\u5730\u4e9a\u54e5\u52a8\u6f2b\u5c55", "url": "http:\/\/sc.chinaz.com\/", "subtitle": "\u9b54\u517d\u7535\u5f71\u5468\u516d\u516c\u5e03", "image": "images\/lwuY-fxesfty0408487.jpg", "thumb": "images\/vfi3-fxesfuc3551167.jpg", "summary": "\u6765\u81ea\u4e8eEntertainment Weekly\u7684\u6700\u65b0\u6d88\u606f\uff0c\u9b54\u517d\u4e16\u754c\u7535\u5f71\u5c06\u4e8e7\u670811\u65e5\u7684\u5723\u5730\u4e9a\u54e5\u56fd\u9645\u52a8\u6f2b\u5c55\u4e0a\u516c\u5e03\u3002", "related_title_1": "\u9ed1\u6697\u4e4b\u95e8\u6d77\u62a5", "related_image_1": "http:\/\/sc.chinaz.com\/", "related_title_2": "\u5bfc\u6f14COS\u517d\u4eba", "related_image_2": "http:\/\/sc.chinaz.com\/", "mark": "0" }, { "title": "G\u676f\u6e38\u620f\u5973\u795e\u5353\u6bd3\u5f64\u8fd1\u65e5\u7ed9\u529b\u79c1\u7167 \u5f15\u5b85\u7537\u75af\u72c2\u55b7\u8840", "url": "http:\/\/sc.chinaz.com\/", "subtitle": "\u6e38\u620f\u5973\u795e\u7ed9\u529b\u79c1\u7167", "image": "images\/-Gtx-fxesftz6781939.jpg", "thumb": "images\/vJpT-fxesftz6781941.jpg", "summary": "\u8fd1\u65e5\u6211\u4eec\u7684\u5973\u795e\u53c8\u4e3a\u5b85\u7537\u4eec\u653e\u9001\u4e86\u4e00\u5927\u6ce2\u7ed9\u529b\u79c1\u7167\uff0c\u5f15\u5f97\u5b85\u7537\u73a9\u5bb6\u53e3\u6c34\u6d9f\u6d9f\uff0c\u5c0f\u4f19\u4f34\u4eec\u968f\u7740\u5c0f\u7f16\u4e00\u8d77\u6765\u6b23\u8d4f\u5427\uff01", "related_title_1": "\u4ee3\u8a00\u6e38\u620f\u8d70\u7ea2", "related_image_1": "http:\/\/sc.chinaz.com\/", "related_title_2": "\u5b85\u7537\u7f8e\u80f8\u5973\u795e", "related_image_2": "http:\/\/sc.chinaz.com\/", "mark": "0" }, { "title": "\u4e00\u5468\u624b\u6e38\u5f00\u6d4b\u9884\u544a\uff1a\u300a\u4e5d\u9634\u771f\u7ecf\u300b\u5220\u6863\u6d4b\u8bd5", "url": "http:\/\/sc.chinaz.com\/", "subtitle": "\u7f8e\u56fd\u5927\u7247\u6539\u7f16\u624b\u6e38", "image": "images\/znaY-fxesfty0426946.jpg", "thumb": "images\/xOeg-fxesfuc3555437.jpg", "summary": "\u53c8\u5230\u4e86\u4e00\u5468\u5f00\u6d4b\u624b\u6e38\u63a8\u8350\u7684\u65f6\u95f4\uff0c\u4f60\u51c6\u5907\u597d\u4e86\u5417\uff01\u672c\u5468\u5f00\u6d4b\u7684\u624b\u6e38\u79cd\u7c7b\u7e41\u591a\uff0c\u6709\u89d2\u8272\u626e\u6f14\u7c7b\u4e5d\u9634\u771f\u7ecf\u548c\u82cd\u7a79\u53d8", "related_title_1": "\u4e5d\u9634\u771f\u7ecf", "related_image_1": "http:\/\/sc.chinaz.com\/", "related_title_2": "\u7edd\u5730\u6218\u8b66", "related_image_2": "http:\/\/sc.chinaz.com\/", "mark": "0" }, { "title": "\u300a\u5251\u6e7e\u4f20\u5947\u300b\u516c\u5e03\u5168\u65b0\u6e38\u620f\u6f14\u793a \u73a9\u5bb6\u53ef\u81ea\u5df1\u5efa\u5730\u4e0b\u57ce", "url": "http:\/\/sc.chinaz.com\/", "subtitle": "\u5251\u6e7e\u4f20\u5947\u6700\u65b0\u89c6\u9891", "image": "images\/_UYH-fxesfty0422934.jpg", "thumb": "images\/ohtY-fxesssr5454722.jpg", "summary": "\u300a\u5251\u6e7e\u4f20\u5947\u300b\u4eca\u5929\u516c\u5e03\u4e86\u5168\u65b0\u7684\u6e38\u620f\u89c6\u9891\uff0c\u5c55\u793a\u4e86\u6e38\u620f\u4e2d\u6781\u4e3a\u7075\u6d3b\u7684\u6218\u5f79\u521b\u5efa\u5de5\u5177\u548c\u526f\u672c\u5927\u5e08\u6e38\u620f\u8fc7\u7a0b", "related_title_1": "\u65b0\u6e38\u620f\u6a21\u5f0f", "related_image_1": "http:\/\/sc.chinaz.com\/", "related_title_2": "\u5b9e\u673a\u6e38\u620f\u89c6\u9891", "related_image_2": "http:\/\/sc.chinaz.com\/", "mark": "0" }, { "title": "\u300a\u6211\u7684\u4e16\u754c\uff1a\u6545\u4e8b\u6a21\u5f0f\u300b\u5ba3\u4f20\u89c6\u9891\u9996\u66dd", "url": "http:\/\/sc.chinaz.com\/", "subtitle": "\u6211\u7684\u4e16\u754c\u6545\u4e8b\u6a21\u5f0f", "image": "images\/ui2t-fxesftz6772647.jpg", "thumb": "images\/nvsq-fxesftz6772653.jpg", "summary": "\u300a\u6211\u7684\u4e16\u754c\u300b\u53ef\u8c13\u65f6\u4e0b\u6700\u70ed\u95e8\u7684\u6e38\u620f\uff0c\u51ed\u501f\u7740\u8fd9\u6b3e\u795e\u4f5c\uff0cMojang \u540d\u58f0\u5927\u632f\uff0c\u5fae\u8f6f\u751a\u81f3\u65a5\u5de8\u8d44\u5c06\u5176\u6536\u8d2d", "related_title_1": "\u767b\u5f55WIN10", "related_image_1": "http:\/\/sc.chinaz.com\/", "related_title_2": "\u94f6\u9b42\u4e71\u5165", "related_image_2": "http:\/\/sc.chinaz.com\/", "mark": "0" }, { "title": "站长素材", "url": "http:\/\/sc.chinaz.com\/  ", "subtitle": "\u519b\u653f\u6218\u7565\u624b\u6e38\u66dd\u5149", "image": "images\/fcRo-fxesfuc3549534.jpg", "thumb": "images\/JHpf-fxesftz6773913.jpg", "summary": "\u4e71\u4e16\u4e89\u9738\uff0c\u91d1\u6208\u94c1\u9a6c\uff0c\u6562\u95ee\u8c01\u80fd\u4e00\u7edf\u5c71\u6cb3\uff1f\u5982\u4eca\uff0c\u65b0\u7684\u5386\u53f2\u5373\u5c06\u7531\u4f60\u4e66\u5199\uff0c\u519b\u653f\u6218\u7565\u624b\u6e38\u300a\u7387\u571f\u4e4b\u6ee8\u300b\u5373\u5c06\u5c01\u6d4b\uff01", "related_title_1": "\u9ad8\u901f\u6e38\u620f\u4e0b\u8f7d", "related_image_1": "http:\/\/sc.chinaz.com\/", "related_title_2": "\u66f4\u591a\u624b\u6e38\u8d44\u8baf", "related_image_2": "http:\/\/sc.chinaz.com\/", "mark": "0" }];  
  24.         //console.log(home_slide_data);  
  25.         //实例化...................................  
  26.         $('.Homeslide').homeslide(home_slide_data, true, 3000);  
  27.     </script>  

 css代码：

Html代码  收藏代码
  1. /*通用全局设定*/  
  2.         body, input, button, select, textarea, table {  
  3.             font: 12px "Microsoft YaHei", "微软雅黑", "SimSun", "宋体";  
  4.         }  
  5.   
  6.         body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {  
  7.             margin: 0;  
  8.             padding: 0;  
  9.         }  
  10.   
  11.         fieldset, img {  
  12.             border: 0;  
  13.         }  
  14.   
  15.         table {  
  16.             border-collapse: collapse;  
  17.             border-spacing: 0;  
  18.         }  
  19.   
  20.         ol, ul {  
  21.             list-style: none;  
  22.         }  
  23.   
  24.         input, button, select, textarea {  
  25.             outline: none;  
  26.         }  
  27.   
  28.         textarea {  
  29.             resize: none;  
  30.         }  
  31.   
  32.         a:link, a:visited, a:hover, a:active {  
  33.             text-decoration: none;  
  34.         }  
  35.         /*幻灯*/  
  36.         .Homeslide {  
  37.             width: 490px;  
  38.             height: 425px;  
  39.             color: #666565;  
  40.             overflow: hidden;  
  41.             position: relative;  
  42.         }  
  43.   
  44.         .Homeslide_hand0 {  
  45.             width: 37px;  
  46.             height: 53px;  
  47.             position: absolute;  
  48.             left: 0;  
  49.             top: 93px;  
  50.             background: url(http://n.sinaimg.cn/game/homepage/home_slide.png) 0 -53px;  
  51.             cursor: pointer;  
  52.         }  
  53.   
  54.             .Homeslide_hand0:hover {  
  55.                 background-position: 0 0;  
  56.             }  
  57.   
  58.         .Homeslide_hand1 {  
  59.             width: 37px;  
  60.             height: 53px;  
  61.             position: absolute;  
  62.             right: 0;  
  63.             top: 93px;  
  64.             background: url(http://n.sinaimg.cn/game/homepage/home_slide.png) -37px -53px;  
  65.             cursor: pointer;  
  66.         }  
  67.   
  68.             .Homeslide_hand1:hover {  
  69.                 background-position: -37px 0;  
  70.             }  
  71.   
  72.         .Homeslide_bigwrap {  
  73.             width: 490px;  
  74.             height: 318px;  
  75.             position: relative;  
  76.         }  
  77.   
  78.         .Homeslide_bigpicdiv {  
  79.             width: 490px;  
  80.             height: 248px;  
  81.         }  
  82.   
  83.         .Homeslide_bigpicdiv_mask {  
  84.             display: block;  
  85.             width: 100%;  
  86.             height: 40px;  
  87.             line-height: 40px;  
  88.             font-size: 16px;  
  89.             text-indent: 15px;  
  90.             position: absolute;  
  91.             left: 0;  
  92.             top: 209px;  
  93.             color: #fff;  
  94.             background: url(http://n.sinaimg.cn/game/homepage/home_slide.png) 0 74px;  
  95.         }  
  96.   
  97.         .Homeslide_bigpicdiv img {  
  98.             width: 100%;  
  99.             height: 248px;  
  100.         }  
  101.   
  102.         .Homeslide_detail {  
  103.             height: 70px;  
  104.             border-left: 1px solid #d2d2d2;  
  105.             border-right: 1px solid #d2d2d2;  
  106.             line-height: 2em;  
  107.         }  
  108.   
  109.             .Homeslide_detail p {  
  110.                 width: 310px;  
  111.                 padding: 10px 25px 0 15px;  
  112.                 float: left;  
  113.                 height: 52px;  
  114.                 overflow: hidden;  
  115.             }  
  116.   
  117.         .Homeslide_ralate {  
  118.             height: 36px;  
  119.             border-left: 1px solid #d2d2d2;  
  120.             line-height: 1;  
  121.             float: left;  
  122.             padding-left: 26px;  
  123.             margin-top: 16px;  
  124.         }  
  125.   
  126.             .Homeslide_ralate a {  
  127.                 color: #ff6600;  
  128.             }  
  129.   
  130.         .Homeslide_thumb {  
  131.             height: 106px;  
  132.             border: 1px solid #d2d2d2;  
  133.             border-top: none;  
  134.             background: #f2f2f2;  
  135.             position: relative;  
  136.         }  
  137.   
  138.         .Homeslide_angle {  
  139.             width: 13px;  
  140.             height: 7px;  
  141.             position: absolute;  
  142.             left: 55px;  
  143.             top: -7px;  
  144.             overflow: hidden;  
  145.             display: none;  
  146.             background: url(http://n.sinaimg.cn/game/homepage/angle.gif) -1px -1px;  
  147.         }  
  148.   
  149.         .Homeslide_thumb ul {  
  150.             position: absolute;  
  151.             left: 0;  
  152.             top: 0;  
  153.             width: 10000px;  
  154.         }  
  155.   
  156.         .Homeslide_thumb li {  
  157.             width: 122px;  
  158.             height: 95px;  
  159.             float: left;  
  160.             text-align: center;  
  161.             line-height: 12px;  
  162.             cursor: pointer;  
  163.             position: relative;  
  164.             padding-top: 11px;  
  165.             color: #474747;  
  166.         }  
  167.   
  168.             .Homeslide_thumb li.this {  
  169.                 background: #d2d2d2;  
  170.             }  
  171.   
  172.                 .Homeslide_thumb li.this .Homeslide_angle {  
  173.                     display: block;  
  174.                 }  
  175.   
  176.             .Homeslide_thumb li img {  
  177.                 width: 100px;  
  178.                 height: 59px;  
  179.                 display: block;  
  180.                 margin: 0 auto;  
  181.                 margin-bottom: 13px;  
  182.             }  

 via：http://www.w2bc.com/article/49700

posted @ 2015-07-29 08:47  九九九零  阅读(1020)  评论(0)  编辑  收藏  举报