Jquery图片展示插件filmstrip-1.0

seyaa

浏览: 55584 次
性别:
来自: 杭州

最近访客更多访客>>

technicb

hmwangfeng

Ueaner

pengjj2

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Jquery

jQuery json JavaScript Struts Apache

1、效果：

2、 filmstrip-1.0 插件使用方法：
第一步：导入css和js

<link href="css/filmstrip-1.0.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="filmstrip-1.0.js"></script>

第二步：调用插件
1）、静态数据使用：

<script type="text/javascript">
$(function(){ // 文档就绪
	  $("#filmstrip").filmstrip({
		    speed : 3000,// 滚动速度
			width : 500,
			height : 320,
		timeout:60,		  	 data:{"totalCount":6,"result":['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg','images/6.jpg']}
		});
});
</script>

2）、动态url请求数据使用：

<script type="text/javascript">
$(function(){
	  // 文档就绪
	  $("#filmstrip").filmstrip({
			url:'data.json'
		});
});
</script>

3）、后台数据交互使用：
如果是在java环境使用，要有json-lib库
Java示例代码：

import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionMapping;
import org.apache.struts.actions.DispatchAction;
public class ImageDate extends DispatchAction
{
 
	
	public void buildImgshow(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response)
			throws Exception {
		List<String> result = new ArrayList<String>();
		result.add("images/1.jpg");
		result.add("images/2.jpg");
		result.add("images/3.jpg");
		result.add("images/4.jpg");
		result.add("images/5.jpg");
		result.add("images/6.jpg");
		JSONObject temp = new JSONObject();
		temp.put("totalCount", result.size());
		temp.put("result", JSONArray.fromObject(result));
		response.setContentType("text/plain;charset=UTF-8");
		response.getWriter().write(temp.toString());
		response.flushBuffer();
	}
	
	public static void main(String[] args) {
		List<String> result = new ArrayList<String>();
		result.add("images/1.jpg");
		result.add("images/2.jpg");
		result.add("images/3.jpg");
		result.add("images/4.jpg");
		result.add("images/5.jpg");
		result.add("images/6.jpg");
		JSONObject temp = new JSONObject();
		temp.put("totalCount", result.size());
		temp.put("result", JSONArray.fromObject(result));
		System.out.println(temp.toString());
	}
}

运行结果：

{"totalCount":6,"result":["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg","images/6.jpg"]}
使用时将2）中的url修改为访问后台方法的路径就可以了，这里只简单介绍在java中的后台代码处理，其他语言原理相同，重要的是传输到前台组件的json格式的数据，格式必须是给出的样式

以上三种方式都必须有一个前提，那就是在页面中有：

<body>
	<div id="filmstrip"></div>//看到这个id是不是和上面jquery取的id相同
</body>

3、

speed:3000, //图片切换速度，默认3000ms
width : 500, //图片展示区域宽度
height : 320, //图片展示区域高度
timeout:60,//url请求方式下的超时时间，默认60s，一般不用设置
url:'data.json'//json 数据请求路径url 

data: 'json格式的数据'
//json格式的数据
注意：这里注意在1.4中，jQuery使用了更严格的方法来解析json。
所有的内容都必须使用双引号。
可以参考：http://hi.baidu.com/proglife/blog/item/c5384e03c8991384d53f7cca.html

filmstrip-1.0 只是简易的版本，如果有什么建议或者需要可以email我。
Email：seyaa-ls@hotmal.com 或者540367164@qq.com

filmstrip-1.0.rar (627.8 KB)
下载次数: 390

分享到：

对jdbc的封装的总结 | 二级菜单jquery导航插件nav

2010-12-02 16:42
浏览 1318
评论(2)
论坛回复 / 浏览 (2 / 3815)
分类:Web前端
查看更多

2 楼 seyaa 2010-12-07

randomterror 写道

能给个详细点的使用文档么？

附件中有文档的

1 楼 randomterror 2010-12-07

能给个详细点的使用文档么？

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Jquery图片展示插件filmstrip-1.0

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Jquery图片展示插件filmstrip-1.0

评论

发表评论

相关推荐

简单的 jquery工具栏 插件

jquery1.4+SWFUpload2.2+COS的jquery上传插件

uploadify-2.1.4多文件上传组件的使用说明整理

jquery+alanx+fileupload上传组件

闲着无聊做一个jquery图片滚动插件

二级菜单jquery导航插件nav

使用jquery 的ajax（get）提交 含%报错问题

jQuery.validator 自定义方法1

最近访客更多访客>>

简单的 jquery工具栏插件

使用jquery 的ajax（get）提交含%报错问题