js高仿网易163幻灯片 好东西!

js幻灯片特效高仿网易163幻灯片展示，用js拖动插件和js滑动条插件两款插件结合制作图片幻灯片效果。

这款幻灯片效果是一种比较好的用户体验设计。

查看演示>>

凤凰网js图片幻灯片插件门户网站流行幻灯片展示特效

查看演示>>

<link type="text/css" href="css/gallery.css" rel="stylesheet" />
<script src="js/slider.js" type="text/javascript"></script>

<div class="nph_area">

<div id="gallery" class="nph_gallery clearfix">
	<div class="nph_bg">

		<div class="nph_photo" id="modePhoto">
			<div class="nph_photo_view">
				<div id="photoView" class="nph_cnt">
					<i></i><img src="http://img1.cache.netease.com/cnews/img/gallery11/bg06.png" id="photo" />
				</div>
				<div class="nph_photo_prev">
					<a id="photoPrev" class="nph_btn_pphoto" target="_self" hidefocus="true" href="#p=7DOBC5MA00AO0001"></a>
				</div>
				<div class="nph_photo_next">

					<a id="photoNext" class="nph_btn_nphoto" target="_self" hidefocus="true" href="#p=7DOBC21A00AO0001"></a>
				</div>
			</div>
			<!--nph_photo_view end-->
			
			<div class="nph_cnt">
				<div class="nph_cnt clearfix">
					<div class="nph_set_info">
						<div id="setInfo">
							<div class="nph_set_title">

								<span id="photoType" class="nph_set_cur">（<span class="nph_c_lh" id="photoIndex">6</span>/11）</span>
								<h1>混血“腰”姬美女，凹凸玲珑妖娆</h1>
							</div>
						</div>
					</div>
				</div>
				
				<div id="photoDesc" class="nph_photo_desc">

					<p></p>
				</div>
			</div><!--nph_cnt end-->
			
			<div class="nph_cnt">
				<div class="clearfix">
					<div class="nph_set">
						<div class="nph_set_thumb">
							<div id="scrl" class="nph_photo_thumb clearfix" style="589px;">
								<div class="clearfix">

									<div class="nph_scrl">
										<div class="nph_scrl_thumb">
											<div class="nph_scrl_main" id="nph_scrl_main">
												<ul id="thumb" class="nph_list_thumb clearfix" style="1180px;">
<li>
<a href="#p=80LDC1RI43UD0031" hidefocus="true"><img src="http://img3.cache.netease.com/photo/0031/2012-05-04/s_80LDC1RI43UD0031.jpg" alt="混血“腰”姬美女，凹凸玲珑妖娆" /></a>
<p>1、近日《使徒》论坛发出一组名为混血美女秀凹凸身材的写真，庆游戏公测。</p>
<i title="img">http://img4.cache.netease.com/photo/0031/2012-05-04/80LDC1RI43UD0031.jpg</i>
<i title="timg">http://img3.cache.netease.com/photo/0031/2012-05-04/t_80LDC1RI43UD0031.jpg</i>
</li>

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

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

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

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

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

</li>
												</ul>
											</div>
											
											<div class="nph_scrl_bar clearfix">
												<span class="nph_scrl_lt"></span>
												<span class="nph_scrl_rt"></span>
												<div class="nph_scrl_bd">
													<div class="nph_scrl_ct" id="nph_scrl_ct">
														<a id="bar" class="nph_btn_scrl">

															<b class="nph_btn_lt"></b>
															<b class="nph_btn_rt"></b>
															<span class="nph_btn_bd"><span><b class="nph_btn_ct"></b></span></span>
														</a>
													</div>
												</div>
											</div>
											
										</div>
									</div>

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

	</div>
</div><!--gallery end-->

</div>

<script type="text/javascript">
var slider = new Slider({
	icontainer : "nph_scrl_ct",
	idrag : "bar",
	plusBtn : "scrlPrev",
	reduceBtn : "scrlNext",
	panel : "thumb",
	content : "nph_scrl_main",	
	direction : "left",
	acceleration : 5,
	sliderAcc : 1		
});

var ul = $.get("nph_scrl_main"),
	list = ul.getElementsByTagName("li"),
	len = list.length,
	intervalD = Math.ceil( ul.scrollWidth / len ),
	intervalS = Math.ceil( slider.Max.left / len ),
	index = 1,
	photoPrev = $.get("photoPrev"),
	photoNext = $.get("photoNext"),
	photo = $.get("photo"),
	photoIndex = $.get("photoIndex"),
	photoDesc = $.get("photoDesc").getElementsByTagName("p")[0];

function removeClass(){
	$.each(list, function(o, i){
		o.className = "";
	});
}

function Go(i, o){
	index = i;
	var _distance = 0;
	if(i > 2){
		slider.content.scrollLeft = intervalD * (i - 2);		
	}else{
		slider.content.scrollLeft = 0;
	}
	_distance = intervalS * i;
	if(i === len - 1){
		_distance = intervalS * (i + 1);
	}
	slider.idrag.style.left = Math.min(Math.max(_distance , 0),slider.Max.left)  + "px"
	removeClass();
	o.className = "nph_list_active";
	photo.src = o.getElementsByTagName("i")[0].innerHTML;
	photoDesc.innerHTML = o.getElementsByTagName("p")[0].innerHTML;
	photoIndex.innerHTML = i + 1;
}

Go(0, list[0]);
	
$.each(list, function(o, i){
	$.addEvent(o, function(){
		Go(i, o);		
	},"click");
});

$.addEvent(photoNext, function(){
	index++;
	if(index >= len){
		index = len - 1;
		return;
	}
	Go(index, list[index]);
	
},"click");

$.addEvent(photoPrev, function(){
	index--;
	if(index < 0 ){
		index = 0;
		return;
	}
	Go(index, list[index]);
	
},"click");
</script>