高仿网易163幻灯片效果

[代码] [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">

165var 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 

177var 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 

189function removeClass(){

190    $.each(list,function(o, i){

191        o.className ="";

192    });

193}

194 

195function 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 

215Go(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>