注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

基于jquery的图片滚动翻页应用gridnav

jQuery插件 fishcity 1238浏览

这是一款很实用的基于jquery的图片滚动翻页应用,应该本身内置了多种效果,通过参数的配置便可实轻松实现。做图片专题或是图片站的朋友有福了,这款应用肯定能为网站带来非凡的体验性。下面来看下如何使用吧。别附一款不错的翻书效果booklet插件

引入核心文件件

<link rel="stylesheet" type="text/css" href="css/gridNavigation.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.gridnav.js"></script>

构建html代码

<div id="tj_container" class="tj_container">
	<div class="tj_nav">
		<span id="tj_prev" class="tj_prev">Previous</span>
		<span id="tj_next" class="tj_next">Next</span>
	</div>
	<div class="tj_wrapper">
		<ul class="tj_gallery">
			<li><a href="#"><img src="images/1.jpg" alt="image01" /></a></li>
			<li><a href="#"><img src="images/2.jpg" alt="image02" /></a></li>
			<li><a href="#"><img src="images/3.jpg" alt="image03" /></a></li>
			<li><a href="#"><img src="images/4.jpg" alt="image04" /></a></li>
			<li><a href="#"><img src="images/5.jpg" alt="image05" /></a></li>
			<li><a href="#"><img src="images/6.jpg" alt="image06" /></a></li>
			<li><a href="#"><img src="images/7.jpg" alt="image07" /></a></li>
			<li><a href="#"><img src="images/8.jpg" alt="image08" /></a></li>
			<li><a href="#"><img src="images/9.jpg" alt="image09" /></a></li>
			<li><a href="#"><img src="images/10.jpg" alt="image10" /></a></li>
			<li><a href="#"><img src="images/11.jpg" alt="image11" /></a></li>
			<li><a href="#"><img src="images/12.jpg" alt="image12" /></a></li>
			<li><a href="#"><img src="images/13.jpg" alt="image13" /></a></li>
			<li><a href="#"><img src="images/14.jpg" alt="image14" /></a></li>
			<li><a href="#"><img src="images/15.jpg" alt="image15" /></a></li>
			<li><a href="#"><img src="images/16.jpg" alt="image16" /></a></li>
			<li><a href="#"><img src="images/17.jpg" alt="image17" /></a></li>
			<li><a href="#"><img src="images/18.jpg" alt="image18" /></a></li>
			<li><a href="#"><img src="images/19.jpg" alt="image19" /></a></li>
			<li><a href="#"><img src="images/20.jpg" alt="image20" /></a></li>
		</ul>
	</div>
</div>

写上JS调用插件

$(function() {
	$('#tj_container').gridnav({
		rows	: 3,
		type	: {
			mode		: 'sequpdown', 		// 图片展现方式 | fade | seqfade | updown | sequpdown | showhide | disperse | rows
			speed		: 500,				// 动画速度 
			easing		: '',				// 动画的方式 fade, seqfade, updown, sequpdown, showhide, disperse, rows	
			factor		: 50,				// for seqfade, sequpdown, rows
			reverse		: false				// for sequpdown
		}
	});
});

转载请注明:jQ酷 » 基于jquery的图片滚动翻页应用gridnav

下载地址:本站下载 | 百度云
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。