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
分享到:
相关推荐
jquery-pager-1.0.rar jquery-pager-1.0.rar jquery-pager-1.0.rar jquery-pager-1.0.rar
jquery可视化开发工具ixedit-1.0pb6
jQuery[1].Switchable-1.0.rar
jquery.mobile-1.0b2 jquery.mobile-1.0b2jquery.mobile-1.0b2jquery.mobile-1.0b2jquery.mobile-1.0b2jquery.mobile-1.0b2jquery.mobile-1.0b2
该资源的原下载地址为https://github.com/jeromeetienne/jquery-qrcode 懒得去下或者在github下载不下来的可以在我这里下载。 实际使用只需要使用这个压缩包里的jquery.qrcode.min.js即可。不过要主要,这个js依赖...
使用帮助:http://www.clanfei.com/2012/08/1644.html
jquery.mobile-1.0
ixedit 使用说明 jquery可视开发
jquery-qrcode-1.0
jquery1.0,建议下载阅读 jquery1.0,建议下载阅读
转载,找不到原作者了,很好用的-
jQuery.Switchable是一款整合了Tabs、Slide、Scrollable等常见UI组件的jQuery插件。它有简单易用的API、可灵活配置的Configuration,支持自定义Effect,支持自主开发Plugin。 几个亮点: 在当前 trigger 中 ...
该插件属于前端UI,本人基于jquery开发的一款标签插件,修复上一版本的bug:初始化input,点击“x”不能移除标签。插件功能:可以添加/删除标签,标签重复提醒等功能,非常轻量级,可扩展性强,可配置性高,可读性高...
jQuery弹出层插件PopupDiv-v1.0下载
jQuery打印插件----jQuery.print.js实现网页的打印功能,亲测有效
jQuery图像展示插件Strip
JQuery弹出层插件 PopupDiv-v1.0 通用自定义弹出层插件 by maxcoold 2009-2-29 bug 提交至:maxcoold@126.com --------------------------------------------- 功能说明: 本插件基于jquery 1.31下编写,请尽量在...
eogallery-1.0 基于jquery的旋转式图片切换.zip
130 + jQuery Snippets jQuerySnippets-1.0.zip