js圖片幻燈片特效高仿網易163幻燈片圖片切換



127 507 170



特效描述:js 圖片幻燈片特效 幻燈片圖片切換,js幻燈片特效高仿網易163幻燈片展示用拖動插件和滑動條插件制作圖片幻燈片效果,點擊切換上下圖片效果。js插件、js代碼。

代碼結構

1. 引入CSS

<link type="text/css" href="css/gallery.css" rel="stylesheet" />

2. 引入JS

<script src="js/slider.js" type="text/javascript"></script>

3. HTML代碼

<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="width: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="width: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>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 自動滾動圖片輪播 切換按鈕 表單 表單美化 表單插件 表單美化插件 焦點圖 幻燈片 輪播圖 bar焦點圖 帶標題的焦點圖 滾動切換 滾動條切換 帶縮略圖的幻燈片 圖片滾動 圖片滾動條 純圖片輪播 圖片輪播 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子