JQ实现新浪游戏首页幻灯片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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'><img src=""></a> 
        </div> 
        <div class='Homeslide_detail'> 
          <p>loading...</p> 
          <div class='Homeslide_ralate'>loading...</div> 
        </div> 
      </div> 
      <div class='Homeslide_thumb'> 
        <ul>loading...</ul> 
      </div> 
    </div> 
  </center> 
  <script type="text/javascript"> 
    //data 
    var home_slide_data = 
   [{ "title": "站长素材", "url": "http://sc.chinaz.com/", "subtitle": "u8f66u6a21u81eau7206u6c89u8ff7LOL", "image": "images/mB6w-fxesftz6773752.jpg", "thumb": "images/vhPm-fxesfuc3549394.jpg", "summary": "2015u5e74CJu5373u5c06u5f00u5e55u5728u5373uff0cu867du7136u7531u4e8eu79cdu79cdu65b0u89c4uff0cu6211u4eecu53efu80fdu518du4e5fu89c1u4e0du5230u79cdu79cdu798fu5229", "related_title_1": "u6d77u8d3cu5973u5e1du5199u771f", "related_image_1": "http://sc.chinaz.com/", "related_title_2": "u5973u661fu4ee3u8a00u624bu6e38", "related_image_2": "http://sc.chinaz.com/", "mark": "0" }, { "title": "App Storeu7f16u8f91u63a8u8350u516du6708u6700u4f73u6e38u620fu76d8u70b9", "url": "http://sc.chinaz.com/", "subtitle": "u516du6708u6700u4f73u624bu6e38u76d8u70b9", "image": "images/Hv1z-fxesfty0407358.jpg", "thumb": "images/T4s2-fxesssr5451139.jpg", "summary": "u6bcfu6708App Storeu7684u7f16u8f91u90fdu4f1au5728u5f53u6708u6700u4ee4u4ebau96beu5fd8u3001u5236u4f5cu6700u7cbeu826fu7684u65b0u4f5cu4e2du627eu51fau6700u68d2u7684u6e38u620fuff0cu4e0bu9762u8ba9u6211u4e00u8d77u6765u770bu770bu6709u54eau4e9bu6e38u620fu5165u9009u516du6708u6700u4f73u5462uff1f", "related_title_1": "u5200u950bu9177u8dd1", "related_image_1": "http://sc.chinaz.com/", "related_title_2": "u8f90u5c04u907fu96beu6240", "related_image_2": "http://sc.chinaz.com/", "mark": "0" }, { "title": "u9b54u517du4e16u754cu7535u5f71u9884u544au7247 7u670811u65e5u4eaeu76f8u5723u5730u4e9au54e5u52a8u6f2bu5c55", "url": "http://sc.chinaz.com/", "subtitle": "u9b54u517du7535u5f71u5468u516du516cu5e03", "image": "images/lwuY-fxesfty0408487.jpg", "thumb": "images/vfi3-fxesfuc3551167.jpg", "summary": "u6765u81eau4e8eEntertainment Weeklyu7684u6700u65b0u6d88u606fuff0cu9b54u517du4e16u754cu7535u5f71u5c06u4e8e7u670811u65e5u7684u5723u5730u4e9au54e5u56fdu9645u52a8u6f2bu5c55u4e0au516cu5e03u3002", "related_title_1": "u9ed1u6697u4e4bu95e8u6d77u62a5", "related_image_1": "http://sc.chinaz.com/", "related_title_2": "u5bfcu6f14COSu517du4eba", "related_image_2": "http://sc.chinaz.com/", "mark": "0" }, { "title": "Gu676fu6e38u620fu5973u795eu5353u6bd3u5f64u8fd1u65e5u7ed9u529bu79c1u7167 u5f15u5b85u7537u75afu72c2u55b7u8840", "url": "http://sc.chinaz.com/", "subtitle": "u6e38u620fu5973u795eu7ed9u529bu79c1u7167", "image": "images/-Gtx-fxesftz6781939.jpg", "thumb": "images/vJpT-fxesftz6781941.jpg", "summary": "u8fd1u65e5u6211u4eecu7684u5973u795eu53c8u4e3au5b85u7537u4eecu653eu9001u4e86u4e00u5927u6ce2u7ed9u529bu79c1u7167uff0cu5f15u5f97u5b85u7537u73a9u5bb6u53e3u6c34u6d9fu6d9fuff0cu5c0fu4f19u4f34u4eecu968fu7740u5c0fu7f16u4e00u8d77u6765u6b23u8d4fu5427uff01", "related_title_1": "u4ee3u8a00u6e38u620fu8d70u7ea2", "related_image_1": "http://sc.chinaz.com/", "related_title_2": "u5b85u7537u7f8eu80f8u5973u795e", "related_image_2": "http://sc.chinaz.com/", "mark": "0" }, { "title": "u4e00u5468u624bu6e38u5f00u6d4bu9884u544auff1au300au4e5du9634u771fu7ecfu300bu5220u6863u6d4bu8bd5", "url": "http://sc.chinaz.com/", "subtitle": "u7f8eu56fdu5927u7247u6539u7f16u624bu6e38", "image": "images/znaY-fxesfty0426946.jpg", "thumb": "images/xOeg-fxesfuc3555437.jpg", "summary": "u53c8u5230u4e86u4e00u5468u5f00u6d4bu624bu6e38u63a8u8350u7684u65f6u95f4uff0cu4f60u51c6u5907u597du4e86u5417uff01u672cu5468u5f00u6d4bu7684u624bu6e38u79cdu7c7bu7e41u591auff0cu6709u89d2u8272u626eu6f14u7c7bu4e5du9634u771fu7ecfu548cu82cdu7a79u53d8", "related_title_1": "u4e5du9634u771fu7ecf", "related_image_1": "http://sc.chinaz.com/", "related_title_2": "u7eddu5730u6218u8b66", "related_image_2": "http://sc.chinaz.com/", "mark": "0" }, { "title": "u300au5251u6e7eu4f20u5947u300bu516cu5e03u5168u65b0u6e38u620fu6f14u793a u73a9u5bb6u53efu81eau5df1u5efau5730u4e0bu57ce", "url": "http://sc.chinaz.com/", "subtitle": "u5251u6e7eu4f20u5947u6700u65b0u89c6u9891", "image": "images/_UYH-fxesfty0422934.jpg", "thumb": "images/ohtY-fxesssr5454722.jpg", "summary": "u300au5251u6e7eu4f20u5947u300bu4ecau5929u516cu5e03u4e86u5168u65b0u7684u6e38u620fu89c6u9891uff0cu5c55u793au4e86u6e38u620fu4e2du6781u4e3au7075u6d3bu7684u6218u5f79u521bu5efau5de5u5177u548cu526fu672cu5927u5e08u6e38u620fu8fc7u7a0b", "related_title_1": "u65b0u6e38u620fu6a21u5f0f", "related_image_1": "http://sc.chinaz.com/", "related_title_2": "u5b9eu673au6e38u620fu89c6u9891", "related_image_2": "http://sc.chinaz.com/", "mark": "0" }, { "title": "u300au6211u7684u4e16u754cuff1au6545u4e8bu6a21u5f0fu300bu5ba3u4f20u89c6u9891u9996u66dd", "url": "http://sc.chinaz.com/", "subtitle": "u6211u7684u4e16u754cu6545u4e8bu6a21u5f0f", "image": "images/ui2t-fxesftz6772647.jpg", "thumb": "images/nvsq-fxesftz6772653.jpg", "summary": "u300au6211u7684u4e16u754cu300bu53efu8c13u65f6u4e0bu6700u70edu95e8u7684u6e38u620fuff0cu51edu501fu7740u8fd9u6b3eu795eu4f5cuff0cMojang u540du58f0u5927u632fuff0cu5faeu8f6fu751au81f3u65a5u5de8u8d44u5c06u5176u6536u8d2d", "related_title_1": "u767bu5f55WIN10", "related_image_1": "http://sc.chinaz.com/", "related_title_2": "u94f6u9b42u4e71u5165", "related_image_2": "http://sc.chinaz.com/", "mark": "0" }, { "title": "站长素材", "url": "http://sc.chinaz.com/ ", "subtitle": "u519bu653fu6218u7565u624bu6e38u66ddu5149", "image": "images/fcRo-fxesfuc3549534.jpg", "thumb": "images/JHpf-fxesftz6773913.jpg", "summary": "u4e71u4e16u4e89u9738uff0cu91d1u6208u94c1u9a6cuff0cu6562u95eeu8c01u80fdu4e00u7edfu5c71u6cb3uff1fu5982u4ecauff0cu65b0u7684u5386u53f2u5373u5c06u7531u4f60u4e66u5199uff0cu519bu653fu6218u7565u624bu6e38u300au7387u571fu4e4bu6ee8u300bu5373u5c06u5c01u6d4buff01", "related_title_1": "u9ad8u901fu6e38u620fu4e0bu8f7d", "related_image_1": "http://sc.chinaz.com/", "related_title_2": "u66f4u591au624bu6e38u8d44u8baf", "related_image_2": "http://sc.chinaz.com/", "mark": "0" }]; 
    //console.log(home_slide_data); 
    //实例化................................... 
    $('.Homeslide').homeslide(home_slide_data, true, 3000); 
  </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
/*通用全局设定*/ 
    body, input, button, select, textarea, table { 
      font: 12px "Microsoft YaHei", "微软雅黑", "SimSun", "宋体"; 
    } 
 
    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; 
    } 
    /*幻灯*/ 
    .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; 
      }