js仿门户网站新闻图片幻灯片切换特效代码下载


js仿门户网站新闻图片幻灯片切换特效代码下载
js仿门户网站新闻图片幻灯片切换特效代码下载以及仿门户网站新闻、图片幻灯片切换等js/jquery网页特效代码下载。

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/ntes_jslib_1.x.js"></script>
<script type="text/javascript" src="js/ntes_ui_scroll.js"></script>
<script type="text/javascript" src="js/nph_gallery_2.11.js"></script>

3. HTML代码

<div class="nph_gallery nph_skin_white" id="gallery342">
	<div class="nph_bg">
		<div class="nph_photo" id="modePhoto342">
			<div class="nph_photo_view">
				<div class="nph_cnt" id="photoView342"><img id="photo342" src="images/img06.jpg"></div>
				<div class="nph_photo_prev"><a class="nph_btn_pphoto" id="photoPrev342" hideFocus href="#"></a></div>
				<div class="nph_photo_next"><a class="nph_btn_nphoto" id="photoNext342" hideFocus href="#"></a></div>
				<div class="nph_photo_loading" id="photoLoading342"></div>
			</div>
			<div class="nph_cnt">
				<div class="nph_photo_ctrl">
					<ul>
						<li>
							<span class="nph_set_cur hidden" id="photoType342">(<span id="photoIndex342"></span>/8)</span>
							<span class="nph_set_siz"e id="streamType342">(共<span class="nph_c_lh">8</span>张)</span>
						</li>
						<li><a class="nph_icon_orig" id="viewOrig342"  href="#">查看原图</a></li>
					</ul>
				</div>
				<div class="nph_photo_desc" id="photoDesc342"></div>
			</div>
			<span class="nph_hr_solid"></span>
			<div class="nph_cnt clearfix">
				<div class="nph_photo_thumb" id="scrl342">
					<div class="clearfix">
						<div class="nph_scrl">
							<div class="nph_scrl_thumb">
								<div class="nph_scrl_main">
									<ul class="nph_list_thumb" id="thumb342"></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">
											<a class="nph_btn_scrl" id="bar342" hideFocus href="#">
												<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 class="nph_btn_pscrl" id="scrlPrev342" hideFocus href="#"></a></span>
						<span class="nph_scrl_next"><a class="nph_btn_nscrl" id="scrlNext342" hideFocus href="#"></a></span>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<textarea class="hidden" id="photoList342">
&lt;li&gt;
&lt;a href="#p=01" hidefocus="true"&gt;&lt;img src="images/img01.jpg" alt="华南师范大学校园风景" /&gt;&lt;/a&gt;
&lt;h2&gt;华南师范大学校园风景&lt;/h2&gt;
&lt;p&gt;&lt;a href="http://www.97zzw.com/"&gt;[详细]&lt;/a&gt;&lt;/p&gt;
&lt;i title="img"&gt;images/img01.jpg&lt;/i&gt;
&lt;i title="timg"&gt;images/img01.jpg&lt;/i&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href="#p=02" hidefocus="true"&gt;&lt;img src="images/img02.jpg" alt="广州大河马水上世界游玩" /&gt;&lt;/a&gt;
&lt;h2&gt;广州大河马水上世界游玩&lt;/h2&gt;
&lt;p&gt;&lt;a href="http://www.97zzw.com/"&gt;[详细]&lt;/a&gt;&lt;/p&gt;
&lt;i title="img"&gt;images/img02.jpg&lt;/i&gt;
&lt;i title="timg"&gt;images/img02.jpg&lt;/i&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href="#p=03" hidefocus="true"&gt;&lt;img src="images/img03.jpg" alt="广东工业大学龙洞校区风景
" /&gt;&lt;/a&gt;
&lt;h2&gt;广东工业大学龙洞校区风景&lt;/h2&gt;
&lt;p&gt;&lt;a href="http://www.97zzw.com/"&gt;[详细]&lt;/a&gt;&lt;/p&gt;
&lt;i title="img"&gt;images/img03.jpg&lt;/i&gt;
&lt;i title="timg"&gt;images/img03.jpg&lt;/i&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href="#p=04" hidefocus="true"&gt;&lt;img src="images/img04.jpg" alt="华南理工大学校园风景
" /&gt;&lt;/a&gt;
&lt;h2&gt;华南理工大学校园风景&lt;/h2&gt;
&lt;p&gt;&lt;a href="http://www.97zzw.com/"&gt;[详细]&lt;/a&gt;&lt;/p&gt;
&lt;i title="img"&gt;images/img04.jpg&lt;/i&gt;
&lt;i title="timg"&gt;images/img04.jpg&lt;/i&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href="#p=05" hidefocus="true"&gt;&lt;img src="images/img05.jpg" alt="华南农业大学校园风景" /&gt;&lt;/a&gt;
&lt;h2&gt;华南农业大学校园风景B&lt;/h2&gt;
&lt;p&gt;&lt;a href="http://www.97zzw.com"&gt;[详细]&lt;/a&gt;&lt;/p&gt;
&lt;i title="img"&gt;images/img05.jpg&lt;/i&gt;
&lt;i title="timg"&gt;images/img05.jpg&lt;/i&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href="#p=06" hidefocus="true"&gt;&lt;img src="images/img06.jpg" alt="广州火炉山游玩
" /&gt;&lt;/a&gt;
&lt;h2&gt;广州火炉山游玩&lt;/h2&gt;
&lt;p&gt;&lt;a href="http://www.97zzw.com/"&gt;[详细]&lt;/a&gt;&lt;/p&gt;
&lt;i title="img"&gt;images/img06.jpg&lt;/i&gt;
&lt;i title="timg"&gt;images/img06.jpg&lt;/i&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href="#p=07" hidefocus="true"&gt;&lt;img src="images/img07.jpg" alt="广州沙面白鹅谭酒吧街游玩
" /&gt;&lt;/a&gt;
&lt;h2&gt;广州沙面白鹅谭酒吧街游玩&lt;/h2&gt;
&lt;p&gt;&lt;a href="http://www.97zzw.com/"&gt;[详细]&lt;/a&gt;&lt;/p&gt;
&lt;i title="img"&gt;images/img07.jpg&lt;/i&gt;
&lt;i title="timg"&gt;images/img07.jpg&lt;/i&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href="#p=08" hidefocus="true"&gt;&lt;img src="images/img08.jpg" alt="深圳大学,东门步行街,世界之窗游玩" /&gt;&lt;/a&gt;
&lt;h2&gt;深圳大学,东门步行街,世界之窗游玩&lt;/h2&gt;
&lt;p&gt;&lt;a href="http://www.97zzw.com/"&gt;[详细]&lt;/a&gt;&lt;/p&gt;
&lt;i title="img"&gt;images/img08.jpg&lt;/i&gt;
&lt;i title="timg"&gt;images/img08.jpg&lt;/i&gt;
&lt;/li&gt;
</textarea>
<div class="hidden" id="galleryTpl342"></div>
<script type="text/javascript">
NTES.ready(function($){
	new nph.Gallery({ sn: "342" });
});
</script>

相关推荐

发表评论

相关文章