六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 143|回复: 0

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

[复制链接]

升级  98%

11

主题

11

主题

11

主题

童生

Rank: 1

积分
49
 楼主| 发表于 2013-2-7 22:39:44 | 显示全部楼层 |阅读模式
没事的时候研究了下jquery插件开发,就顺手写了点插件。未经过严谨额测试,权当玩玩......

分为 两个方向的滚动:
首先引入jquery库:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
上下方向:

引入js和css:
<link href="css/imgScoll-tm-1.0.css" rel="stylesheet" type="text/css"></link><script type="text/javascript" src="imgScoll-mt-1.0.js"></script>
如何使用:
<script type="text/javascript">$(function(){  // 文档就绪  $("#view").imgScoll({  width:240,  height:315,  speed:10,  delay:1000,  direction:'mtt',  data:{"totalCount" : 7,"result" : [{"src":'images/1.jpg',"describe":'test1test1test1',"href":'#'},{"src":'images/2.jpg',"describe":'test2test2test2',"href":'#'},          {"src":'images/3.jpg',"describe":'test3test3test3test3',"href":'#'},          {"src":'images/4.jpg',"describe":'4444444444',"href":'#'},          {"src":'images/5.jpg',"describe":'55555555555555',"href":'#'},          {"src":'images/6.jpg',"describe":'6666666666666',"href":'#'},         {"src":'images/1.jpg',"describe":'7777777777777',"href":'#'}      ]}  });    });</script><div id="view" ></div>
左右方向:

引入js和css:
<link href="css/imgScoll-rl-1.0.css" rel="stylesheet" type="text/css"></link><script type="text/javascript" src="imgScoll-rl-1.0.js"></script>
如何使用:
<script type="text/javascript">$(function(){  // 文档就绪  $("#view").imgScoll({  width:1002,  height:263,  speed:20,  delay:1000,  direction:'ltr',  data:{"totalCount" : 7,"result" : [{"src":'images/1.jpg',"describe":'test1test1test1',"href":'#'},{"src":'images/2.jpg',"describe":'test2test2test2',"href":'#'},          {"src":'images/3.jpg',"describe":'test3test3test3test3',"href":'#'},          {"src":'images/4.jpg',"describe":'4444444444',"href":'#'},          {"src":'images/5.jpg',"describe":'55555555555555',"href":'#'},          {"src":'images/6.jpg',"describe":'6666666666666',"href":'#'},         {"src":'images/5.jpg',"describe":'7777777777777',"href":'#'}      ]}  });    var p = $("p:first");  $("#view").scrollLeft(500);});</script><div id="view" ></div>
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表