Jquery图片展示插件filmstrip-1.0-CSDN博客

本文介绍了一个名为filmstrip-1.0的轻量级轮播图插件的使用方法，包括静态数据展示、动态URL请求数据及后台交互等应用场景，并提供了Java环境下与插件交互的具体示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、效果：
[img]http://dl.iteye.com/upload/picture/pic/77169/14036934-bdde-388b-827f-f753290df98e.bmp[/img]
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