Jquery图片展示插件filmstrip-1.0
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, //图片切换速度，默认3000mswidth : 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
1 楼 randomterror 2010-12-07 能给个详细点的使用文档么？ 2 楼 seyaa 2010-12-07 randomterror 写道能给个详细点的使用文档么？
附件中有文档的