浏览 4004 次
|
锁定老帖子 主题：闲着无聊做一个jquery图片滚动插件
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (1)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2011-05-09
最后修改：2011-05-09
没事的时候研究了下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>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2011-10-06
看了一下，效果还是不错的
准备再扩展一下 增加一个鼠标经过放大图片效果 |
| 返回顶楼 | |
|
发表时间：2011-10-06
仔细的看了一下
滚动图片的数据来源，是用json数据的方式 这样不太好 一是不容易跟其他插件合并效果 另一方面，不容易控件HTML样式 |
| 返回顶楼 | |
