您的位置：首页 > 其它

高仿网易163幻灯片效果

2012-12-27 08:26 232 查看

[代码] [JavaScript]代码

001
<link type=
"text/css"

href=
"css/gallery.css"
rel=
"stylesheet"
/>
002
<script src=
"js/slider.js"

type=
"text/javascript"
></script>
003
004
<div class=
"nph_area"
>
005
006
<div id=
"gallery"

class=
"nph_gallery clearfix"
>
007
<div class=
"nph_bg"
>
008
009
<div class=
"nph_photo"

id=
"modePhoto"
>
010
<div class=
"nph_photo_view"
>
011
<div id=
"photoView"

class=
"nph_cnt"
>
012
<i></i><img src=
"http://img1.cache.netease.com/cnews/img/gallery11/bg06.png"

id=
"photo"
 
/>
013
</div>
014
<div class=
"nph_photo_prev"
>
015
<a id=
"photoPrev"

class=
"nph_btn_pphoto"
 
target=
"_self"
 
hidefocus=
"true"

href=
"#p=7DOBC5MA00AO0001"
></a>
016
</div>
017
<div class=
"nph_photo_next"
>
018
019
<a id=
"photoNext"

class=
"nph_btn_nphoto"
 
target=
"_self"
 
hidefocus=
"true"

href=
"#p=7DOBC21A00AO0001"
></a>
020
</div>
021
</div>
022
<!--nph_photo_view end-->
023
 
024
<div class=
"nph_cnt"
>
025
<div class=
"nph_cnt clearfix"
>
026
<div class=
"nph_set_info"
>
027
<div id=
"setInfo"
>
028
<div class=
"nph_set_title"
>
029
030
<span id=
"photoType"

class=
"nph_set_cur"
>（<span class=
"nph_c_lh"

id=
"photoIndex"
>6</span>/11）</span>
031
<h1>混血“腰”姬美女，凹凸玲珑妖娆</h1>
032
</div>
033
</div>
034
</div>
035
</div>
036
 
037
<div id=
"photoDesc"

class=
"nph_photo_desc"
>
038
039
<p></p>
040
</div>
041
</div><!--nph_cnt end-->
042
 
043
<div class=
"nph_cnt"
>
044
<div class=
"clearfix"
>
045
<div class=
"nph_set"
>
046
<div class=
"nph_set_thumb"
>
047
<div id=
"scrl"

class=
"nph_photo_thumb clearfix"

style=
"width:589px;"
>
048
<div class=
"clearfix"
>
049
050
<div class=
"nph_scrl"
>
051
<div class=
"nph_scrl_thumb"
>
052
<div class=
"nph_scrl_main"

id=
"nph_scrl_main"
>
053
<ul id=
"thumb"

class=
"nph_list_thumb clearfix"

style=
"width:1180px;"
>
054
<li>
055
<a href=
"#p=80LDC1RI43UD0031"

hidefocus=
"true"
><img src=
"http://img3.cache.netease.com/photo/0031/2012-05-04/s_80LDC1RI43UD0031.jpg"

alt=
"混血“腰”姬美女，凹凸玲珑妖娆"
 
/></a>
056
<p>1、近日《使徒》论坛发出一组名为混血美女秀凹凸身材的写真，庆游戏公测。</p>
057
<i title=
"img"
>http:
//img4.cache.netease.com/photo/0031/2012-05-04/80LDC1RI43UD0031.jpg</i>
058
<i title=
"timg"
>http:
//img3.cache.netease.com/photo/0031/2012-05-04/t_80LDC1RI43UD0031.jpg</i>
059
</li>
060
061
<li>
062
<a href=
"#p=80LDBVG943UD0031"

hidefocus=
"true"
><img src=
"http://img4.cache.netease.com/photo/0031/2012-05-04/s_80LDBVG943UD0031.jpg"

alt=
"混血“腰”姬美女，凹凸玲珑妖娆"
 
/></a>
063
<p>2、近日《使徒》论坛发出一组名为混血美女秀凹凸身材的写真，庆游戏公测。</p>
064
<i title=
"img"
>http:
//img4.cache.netease.com/photo/0031/2012-05-04/80LDBVG943UD0031.jpg</i>
065
<i title=
"timg"
>http:
//img3.cache.netease.com/photo/0031/2012-05-04/t_80LDBVG943UD0031.jpg</i>
066
</li>
067
<li>
068
<a href=
"#p=80LDC4EG43UD0031"

hidefocus=
"true"
><img src=
"http://img3.cache.netease.com/photo/0031/2012-05-04/s_80LDC4EG43UD0031.jpg"

alt=
"混血“腰”姬美女，凹凸玲珑妖娆"
 
/></a>
069
<p>3、近日《使徒》论坛发出一组名为混血美女秀凹凸身材的写真，庆游戏公测。</p>
070
<i title=
"img"
>http:
//img3.cache.netease.com/photo/0031/2012-05-04/80LDC4EG43UD0031.jpg</i>
071
<i title=
"timg"
>http:
//img4.cache.netease.com/photo/0031/2012-05-04/t_80LDC4EG43UD0031.jpg</i>
072
073
</li>
074
<li>
075
<a href=
"#p=80LDC11R43UD0031"

hidefocus=
"true"
><img src=
"http://img3.cache.netease.com/photo/0031/2012-05-04/s_80LDC11R43UD0031.jpg"

alt=
"混血“腰”姬美女，凹凸玲珑妖娆"
 
/></a>
076
<p>4、近日《使徒》论坛发出一组名为混血美女秀凹凸身材的写真，庆游戏公测。</p>
077
<i title=
"img"
>http:
//img3.cache.netease.com/photo/0031/2012-05-04/80LDC11R43UD0031.jpg</i>
078
<i title=
"timg"
>http:
//img3.cache.netease.com/photo/0031/2012-05-04/t_80LDC11R43UD0031.jpg</i>
079
</li>
080
<li>
081
<a href=
"#p=80LDBVOE43UD0031"

hidefocus=
"true"
><img src=
"http://img3.cache.netease.com/photo/0031/2012-05-04/s_80LDBVOE43UD0031.jpg"

alt=
"混血“腰”姬美女，凹凸玲珑妖娆"
 
/></a>
082
<p>5、近日《使徒》论坛发出一组名为混血美女秀凹凸身材的写真，庆游戏公测。</p>
083
<i title=
"img"
>http:
//img3.cache.netease.com/photo/0031/2012-05-04/80LDBVOE43UD0031.jpg</i>
084
<i title=
"timg"
>http:
//img4.cache.netease.com/photo/0031/2012-05-04/t_80LDBVOE43UD0031.jpg</i>
085
086
</li>
087
<li>
088
<a href=
"#p=80LDC0BE43UD0031"

hidefocus=
"true"
><img src=
"http://img4.cache.netease.com/photo/0031/2012-05-04/s_80LDC0BE43UD0031.jpg"

alt=
"混血“腰”姬美女，凹凸玲珑妖娆"
 
/></a>
089
<p>6、近日《使徒》论坛发出一组名为混血美女秀凹凸身材的写真，庆游戏公测。</p>
090
<i title=
"img"
>http:
//img3.cache.netease.com/photo/0031/2012-05-04/80LDC0BE43UD0031.jpg</i>
091
<i title=
"timg"
>http:
//img4.cache.netease.com/photo/0031/2012-05-04/t_80LDC0BE43UD0031.jpg</i>
092
</li>
093
<li>
094
<a href=
"#p=80LDC1B543UD0031"

hidefocus=
"true"
><img src=
"http://img3.cache.netease.com/photo/0031/2012-05-04/s_80LDC1B543UD0031.jpg"

alt=
"混血“腰”姬美女，凹凸玲珑妖娆"
 
/></a>
095
<p>7、近日《使徒》论坛发出一组名为混血美女秀凹凸身材的写真，庆游戏公测。</p>
096
<i title=
"img"
>http:
//img3.cache.netease.com/photo/0031/2012-05-04/80LDC1B543UD0031.jpg</i>
097
<i title=
"timg"
>http:
//img4.cache.netease.com/photo/0031/2012-05-04/t_80LDC1B543UD0031.jpg</i>
098
099
</li>
100
<li>
101
<a href=
"#p=80LDC2J743UD0031"

hidefocus=
"true"
><img src=
"http://img4.cache.netease.com/photo/0031/2012-05-04/s_80LDC2J743UD0031.jpg"

alt=
"混血“腰”姬美女，凹凸玲珑妖娆"
 
/></a>
102
<p>8、近日《使徒》论坛发出一组名为混血美女秀凹凸身材的写真，庆游戏公测。</p>
103
<i title=
"img"
>http:
//img4.cache.netease.com/photo/0031/2012-05-04/80LDC2J743UD0031.jpg</i>
104
<i title=
"timg"
>http:
//img3.cache.netease.com/photo/0031/2012-05-04/t_80LDC2J743UD0031.jpg</i>
105
</li>
106
<li>
107
<a href=
"#p=80LDC2TE43UD0031"

hidefocus=
"true"
><img src=
"http://img4.cache.netease.com/photo/0031/2012-05-04/s_80LDC2TE43UD0031.jpg"

alt=
"混血“腰”姬美女，凹凸玲珑妖娆"
 
/></a>
108
<p>9、近日《使徒》论坛发出一组名为混血美女秀凹凸身材的写真，庆游戏公测。</p>
109
<i title=
"img"
>http:
//img4.cache.netease.com/photo/0031/2012-05-04/80LDC2TE43UD0031.jpg</i>
110
<i title=
"timg"
>http:
//img3.cache.netease.com/photo/0031/2012-05-04/t_80LDC2TE43UD0031.jpg</i>
111
112
</li>
113
<li>
114
<a href=
"#p=80LDC3BP43UD0031"

hidefocus=
"true"
><img src=
"http://img3.cache.netease.com/photo/0031/2012-05-04/s_80LDC3BP43UD0031.jpg"

alt=
"混血“腰”姬美女，凹凸玲珑妖娆"
 
/></a>
115
<p>10、近日《使徒》论坛发出一组名为混血美女秀凹凸身材的写真，庆游戏公测。</p>
116
<i title=
"img"
>http:
//img3.cache.netease.com/photo/0031/2012-05-04/80LDC3BP43UD0031.jpg</i>
117
<i title=
"timg"
>http:
//img4.cache.netease.com/photo/0031/2012-05-04/t_80LDC3BP43UD0031.jpg</i>
118
</li>
119
<li>
120
<a href=
"#p=80LDC43543UD0031"

hidefocus=
"true"
><img src=
"http://img3.cache.netease.com/photo/0031/2012-05-04/s_80LDC43543UD0031.jpg"

alt=
"混血“腰”姬美女，凹凸玲珑妖娆"
 
/></a>
121
<p>11、近日《使徒》论坛发出一组名为混血美女秀凹凸身材的写真，庆游戏公测。</p>
122
<i title=
"img"
>http:
//img3.cache.netease.com/photo/0031/2012-05-04/80LDC43543UD0031.jpg</i>
123
<i title=
"timg"
>http:
//img4.cache.netease.com/photo/0031/2012-05-04/t_80LDC43543UD0031.jpg</i>
124
125
</li>
126
</ul>
127
</div>
128
 
129
<div class=
"nph_scrl_bar clearfix"
>
130
<span class=
"nph_scrl_lt"
></span>
131
<span class=
"nph_scrl_rt"
></span>
132
<div class=
"nph_scrl_bd"
>
133
<div class=
"nph_scrl_ct"

id=
"nph_scrl_ct"
>
134
<a id=
"bar"

class=
"nph_btn_scrl"
>
135
136
<b class=
"nph_btn_lt"
></b>
137
<b class=
"nph_btn_rt"
></b>
138
<span class=
"nph_btn_bd"
><span><b class=
"nph_btn_ct"
></b></span></span>
139
</a>
140
</div>
141
</div>
142
</div>
143
 
144
</div>
145
</div>
146
147
 
148
<span class=
"nph_scrl_prev"
><a id=
"scrlPrev"

class=
"nph_btn_pscrl"
 
hidefocus=
"true"
 
href=
"javascript:void(0)"
></a></span>
149
<span class=
"nph_scrl_next"
><a id=
"scrlNext"

class=
"nph_btn_nscrl"
 
hidefocus=
"true"
 
href=
"javascript:void(0)"
></a></span>
150
 
151
</div>
152
</div>
153
</div>
154
</div>
155
</div>
156
</div>
157
</div>
158
159
</div>
160
</div><!--gallery end-->
161
162
</div>
163
164
<script type=
"text/javascript"
>
165
var
 
slider =
new
 
Slider({
166
icontainer :
"nph_scrl_ct"
,
167
idrag :

"bar"
,
168
plusBtn :
"scrlPrev"
,
169
reduceBtn :
"scrlNext"
,
170
panel :

"thumb"
,
171
content :
"nph_scrl_main"
,
172
direction :
"left"
,
173
acceleration : 5,
174
sliderAcc : 1
175
});
176
177
var
 
ul = $.get(
"nph_scrl_main"
),
178
list = ul.getElementsByTagName(
"li"
),
179
len = list.length,
180
intervalD = Math.ceil( ul.scrollWidth / len ),
181
intervalS = Math.ceil( slider.Max.left / len ),
182
index = 1,
183
photoPrev = $.get(
"photoPrev"
),
184
photoNext = $.get(
"photoNext"
),
185
photo = $.get(
"photo"
),
186
photoIndex = $.get(
"photoIndex"
),
187
photoDesc = $.get(
"photoDesc"
).getElementsByTagName(
"p"
)[0];
188
189
function
 
removeClass(){
190
$.each(list,
function
(o, i){
191
o.className =
""
;
192
});
193
}
194
195
function
 
Go(i, o){
196
index = i;
197
var

_distance = 0;
198
if
(i > 2){
199
slider.content.scrollLeft = intervalD * (i - 2);
200
}
else
{
201
slider.content.scrollLeft = 0;
202
}
203
_distance = intervalS * i;
204
if
(i === len - 1){
205
_distance = intervalS * (i + 1);
206
}
207
slider.idrag.style.left = Math.min(Math.max(_distance , 0),slider.Max.left)  +
"px"
208
removeClass();
209
o.className =
"nph_list_active"
;
210
photo.src = o.getElementsByTagName(
"i"
)[0].innerHTML;
211
photoDesc.innerHTML = o.getElementsByTagName(
"p"
)[0].innerHTML;
212
photoIndex.innerHTML = i + 1;
213
}
214
215
Go(0, list[0]);
216
 
217
$.each(list,
function
(o, i){
218
$.addEvent(o,
function
(){
219
Go(i, o);
220
},
"click"
);
221
});
222
223
$.addEvent(photoNext,
function
(){
224
index++;
225
if
(index >= len){
226
index = len - 1;
227
return
;
228
}
229
Go(index, list[index]);
230
 
231
},
"click"
);
232
233
$.addEvent(photoPrev,
function
(){
234
index--;
235
if
(index < 0 ){
236
index = 0;
237
return
;
238
}
239
Go(index, list[index]);
240
 
241
},
"click"
);
242
</script>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航