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

[b]没事的时候研究了下jquery插件开发,就顺手写了点插件。未经过严谨额测试,权当玩玩......
[/b]
[color=red]分为 两个方向的滚动:[/color]
首先引入jquery库:

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

上下方向:
[img]http://seyaa.iteye.com/upload/picture/pic/89656/d69cb7af-c02b-3fcd-b1a8-3d14f364bdcc.png[/img]
引入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>



左右方向:
[img]http://seyaa.iteye.com/upload/picture/pic/89654/f29863e1-c394-3bf4-a01b-f2afafcc3f36.png[/img]
引入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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值