JQ Realize Sina game homepage Slide _jquery

The following through the way to show you the JQ Sina Game homepage Slide Code, the implementation of the following methods:

Share a page of Sina game based on jquery slide, with left and right arrows, tab thumbnails, automatic carousel toggle jquery Slide code. The effect chart is as follows:

HTML code:

<br><center> <div class= ' homeslide ' > <div class= ' homeslide_bigwrap ' > <div class= ' homeslide_hand0 ' ></div> <div class= ' homeslide_hand1 ' ></div> <a target= ' _ 
          Blank ' class= ' homeslide_bigpicdiv_mask ' >loading...</a> <div class= ' Homeslide_bigpicdiv ' > <a href= ' # ' target= ' _blank ' ></a> </div> <div class= ' homeslide_d 
        Etail ' > <p>loading...</p> <div class= ' homeslide_ralate ' >loading...</div> </div> </div> <div class= ' homeslide_thumb ' > <ul>loading...</ul& 
      Gt </div> </div> </center> <script type= "Text/javascript" >//data var home_slide _data = [{"title": "Webmaster material", "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 ":" Webmaster material ", "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 "}]; 
    Console.log (Home_slide_data); To instantiate ........................... 
  Homeslide '). Homeslide (Home_slide_data, True, 3000); </script>

  
 css code:

/* Universal Global SET * * * body, input, button, select, TextArea, table {font:12px "Microsoft Yahei", "Microsoft Ya-hei", "SimSun", "XXFarEastFont-Arial" 
    ";  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 { 
      margin:0; 
    padding:0; 
    FieldSet, img {border:0; 
      } table {border-collapse:collapse; 
    border-spacing:0; 
    OL, ul {list-style:none; 
    Input, button, select, textarea {outline:none; 
    } textarea {resize:none; 
    } a:link, a:visited, A:hover, a:active {text-decoration:none; }/* Slide//. 
      homeslide {width:490px; 
      height:425px; 
      Color: #666565; 
      Overflow:hidden; 
    position:relative; } 
 
    . 
  homeslide_hand0 {width:37px;    height:53px; 
      Position:absolute; 
      left:0; 
      top:93px; 
      Background:url (http://n.sinaimg.cn/game/homepage/home_slide.png) 0-53px; 
    Cursor:pointer; } 
 
      . 
      Homeslide_hand0:hover {background-position:0 0; } 
 
    . 
      homeslide_hand1 {width:37px; 
      height:53px; 
      Position:absolute; 
      right:0; 
      top:93px; 
      Background:url (http://n.sinaimg.cn/game/homepage/home_slide.png) -37px-53px; 
    Cursor:pointer; } 
 
      . 
      Homeslide_hand1:hover {background-position: -37px 0; } 
 
    . 
      homeslide_bigwrap {width:490px; 
      height:318px; 
    position:relative; } 
 
    . 
      Homeslide_bigpicdiv {width:490px; 
    height:248px; } 
 
    . 
      homeslide_bigpicdiv_mask {display:block; 
      width:100%; 
      height:40px; 
      line-height:40px; 
      font-size:16px; 
      text-indent:15px; 
      Position:absolute; left:0; 
      top:209px; 
      Color: #fff; 
    Background:url (http://n.sinaimg.cn/game/homepage/home_slide.png) 0 74px; } 
 
    . 
      Homeslide_bigpicdiv img {width:100%; 
    height:248px; } 
 
    . 
      homeslide_detail {height:70px; 
      border-left:1px solid #d2d2d2; 
      border-right:1px solid #d2d2d2; 
    Line-height:2em; } 
 
      . 
        Homeslide_detail p {width:310px; 
        padding:10px 25px 0 15px; 
        Float:left; 
        height:52px; 
      Overflow:hidden; } 
 
    . 
      homeslide_ralate {height:36px; 
      border-left:1px solid #d2d2d2; 
      Line-height:1; 
      Float:left; 
      padding-left:26px; 
    margin-top:16px; } 
 
      . 
      Homeslide_ralate a {color: #ff6600; } 
 
    . 
      homeslide_thumb {height:106px; 
      border:1px solid #d2d2d2; 
      Border-top:none; 
      Background: #f2f2f2; 
    position:relative; } 
 
    . Homeslide_angle {width:13px; 
      height:7px; 
      Position:absolute; 
      left:55px; 
      Top: -7px; 
      Overflow:hidden; 
      Display:none; 
    Background:url (http://n.sinaimg.cn/game/homepage/angle.gif) -1px-1px; } 
 
    . 
      Homeslide_thumb ul {position:absolute; 
      left:0; 
      top:0; 
    width:10000px; } 
 
    . 
      Homeslide_thumb Li {width:122px; 
      height:95px; 
      Float:left; 
      Text-align:center; 
      line-height:12px; 
      Cursor:pointer; 
      position:relative; 
      padding-top:11px; 
    Color: #474747; } 
 
      . 
      Homeslide_thumb li.this {background: #d2d2d2; } 
 
        . Homeslide_thumb Li.this. 
        Homeslide_angle {display:block; } 
 
      . 
        Homeslide_thumb li img {width:100px; 
        height:59px; 
        Display:block; 
        margin:0 Auto; 
      margin-bottom:13px; 

 }

The above content is all code of this article, need friend can refer to under.