jQuery插件simplyScroll插件跑马灯效果

SimplyScroll是一个能使一系列元素自动或手动、水平或垂直卷动的jQuery插件，能够接收Flickr feed动态图片或JSON源图片，功能非常强大，能实现丰富的效果。

使用说明
需要使用jQuery库文件和simplyScroll库文件
需要自定义显示元素(如，图片)的CSS样式

使用实例
一，包含文件部分

1. <script type="text/javascript" src="/jquery.js"></script>
2. <script type="text/javascript" src="jquery.simplyscroll.js"></script>
3. <link rel="stylesheet" href="jquery.simplyscroll.css" media="all" type="text/css">

二，HTML部分

1. <ul id="scroller">
2. <li><img src="image1.jpg" width="290" height="200"></li>
3. <li><img src="image2.jpg" width="290" height="200"></li>
4. <li><img src="image3.jpg" width="290" height="200"></li>
5. </ul>

三，javascript部分

1. <script type="text/javascript">
2. (function($) {
3. $(function() {
4. $("#scroller").simplyScroll({
5. autoMode: 'loop',
6. });
7. });
8. })(jQuery);
9. </script>

上面实例可知，使用jQuery插件simplyScroll非常简单，定义需要显示的元素(如实例中的图片)就可实现卷动效果。

simplyScroll参数清单(具体大家可查看jQuery插件simplyScroll的JS库文件)

• className    'smooth-scroll'    CSS类名
• frameRate    24    每秒移动或frame的数量
• speed    1            每frame移动的像素
• horizontal    true    移动的方向，水平或垂直
• autoMode 'off'    是否启动自动模式   loop或bounce
• pauseOnHover    true    当鼠标悬停时是否暂停
• flickrFeed    ''    调用JSON使用flickr feed路径
• jsonSource    ''    调用本地JSON
• jsonImgWidth    240    Flickr/JSON 的图片宽度
• jsonImgHeight    180    Flickr/JSON 的图片高度

 

demo下载