基于jQuery图片平滑连续滚动插件

* 此插件要求运行在jQuery v1.3 或更高版本上
* 插件可以实现图片平滑向上或向左滚动
* 如果您需要更多的效果或在使用中本插件存在BUG,可以给在彦磊的博客上留言,彦磊将尽自己最大努力完善此插件
* 您留言前请先到:http://gmarwaha.com/jquery/jcarousellite/ 上面下载jcarousellite插件 
* 来和彦磊图片平滑滚动的插件相互补充使用以获取更多的图片效果
* 彦磊图片平滑滚动插件只是对jcarousellite插件的补充
*
*
* 技术支持:HTTP://HI.BAIDU.COM/DPXDQX
* 此为自由拷贝版本,您可以在此基础上添加任何功能
* 彦磊建议您将修改过的版本或发布地址发到彦磊博客上以共享,也建议您保留部分彦磊的信息
*
*
* 此插件没有象jcarousellite插件样对相关元素的CSS全自动设置,部分CSS样式需要您为设置
* 原因很简单:您需要考虑部分用户的浏览器不支持JAVASCRIPT或相关功能被禁用
* 您需要让您的页面元素布局在此时也能显示正确,因此必要的CSS设置还需要您自己来做。
*
* 使用前您一定要引入jQurey及本脚本,如
* <script type="text/javascript" src="js/jquery_last.js"></script>
* <script type="text/javascript" src="js/YlMarquee.js">
* 使用方法:
*
* 1、为您要设置滚动的对象设置容器,并命名class,如class="ylMarquee"
* 2、将您要滚动的对象置入<ul></ul>中,并添加li标签,li标签中可以是图片、文字或表格……
* 3、此版本需要您设置每个li列表的宽度或高度一至
* <div class="ylMarquee">
* <ul>
* <li><img src="image/1.jpg" alt="1"></li>
* <li><img src="image/2.jpg" alt="2"></li>
* <li><img src="image/3.jpg" alt="3"></li>
* </ul>
* </div>
* 4、设置ylMarquee的height或width样式——向上滚动必须设置height的大小,向左滚动必须设置width的大小,否则页面将显示不正常。
* 5、在页面中添加jQuery语句,调用此插件,并对相关参数进行设置,如:
* <script type="text/javascript">
* $(document).ready(function(){
* $(".stroll").jMarquee({
* visible:3,
* step:1,
* direction:"left"
* });
*});
* </script>
* 6、插件相关参数:
* visible:页面可见元素(图片)个数,默认为1,必须参数。
* step:滚动步长,整数,默认为1,增大此数可加快滚动速度,设为0,则不进行滚动。
* direction:滚动方向,有"left"(向左滚动)和"up"(向上滚动)两个参数,注意设置时一定要加英文的双引("")号或单引号('')。
*/
演示地址:http://img.jb51.net/online/jquery_pic/jquery_pic.htm
下载地址 http://img.jb51.net/online/jquery_pic/jquery_pic_files/YlMarquee.js

(0)

相关推荐

  • jQuery控制li上下循环滚动插件用法实例(附demo源码下载)

    本文实例讲述了jQuery控制li上下循环滚动插件用法.分享给大家供大家参考,具体如下: /** * * jQuery scrollQ plugin li上下滚动插件 * @name jquery-scrollQ.js * @author Q * @date 2012-03-23 * line 显示li行数 * scrollNum 每次滚动li行数 * scrollTime 滚动速度 单位毫秒 * */ (function($){ var status = false; $.fn.scrollQ

  • 基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage

    先给大家展示效果图如下所示: 使用方法: 首先在head区引入jquery.js,jquery-ui.js,fullPage.js以及样式文件jquery.fullPage.css <link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="js/jquery.min.js"></script> <script src="

  • jQuery新闻滚动插件 jquery.roller.js

    我在源码里给出了注释,有什么不足之处后或者可以改进的地方, 希望能够大家留言探讨... 效果图(比较朴素): 复制代码 代码如下: ;(function($) { $.fn.roller = function(options) { var opts = $.extend({}, $.fn.roller.defaults, options), // 通过循环队列来管理滚动信息 itemQueue = new Array(); return this.each(function(index) { v

  • jquery tools 系列 scrollable(2)

    scrollable提供的一系列获取scrollable对象的方法具体使用方式如下: 复制代码 代码如下: var scrollable=$("div.scrollable").scrollable();     //alert(scrollable.getConf().prev);//获取配置对象中的prev属性     scrollable.getConf().speed=200;//设置配置对象的speed属性     //alert(scrollable.getIndex())

  • jcarousellite.js 基于Jquery的图片无缝滚动插件

    1.引入JS库,jquery.js脚本和插件脚本jcarousellite.js. 复制代码 代码如下: <script type="text/javascript" src="path/to/jquery.js"></script> <script type="text/javascript" src="path/to/jcarousellite.js"></script> 2

  • jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析

    这个ScrollableGridPlugin.js是从网上找到的一个具有固定表头效果的插件,使用起来灰常的简便,而且效果也是看着不错的.不过毕竟不是量身定做的,所以有的地方在自己的项目中还是要进行一点点小改动,因为实在是太喜欢这个插件了,所以第一次进到里面,看看原作者的思路和写法,然后才能知道如何去改成适合自己项目. 对于js我完全是一个非常业余的选手,下面根据自己的现状对这个插件做了分析,反正自己是搞明白怎么回事了,有分析不对的,还请高手指教. /*! * This plug-in is de

  • jQuery滚动插件scrollable.js用法分析

    本文实例讲述了jQuery滚动插件scrollable.js用法.分享给大家供大家参考,具体如下: Scrollable是一个灵活.轻量级用于创建滚动内容的jQuery插件.任何内容(HTML.视频.文件.图片等...)都可以作为一个滚动项.支持水平与垂直两种滚动方向. 用途:滚动效果,可制作分步验证页面 以下scrollable.js方法说明描述: 方法名称 返回值 说明 getConf() Object 返回scrollable的配置对象,并且可通过设置该对象的相关属性值来修改该配置对象的属

  • jquery tools 系列 scrollable学习

    复制代码 代码如下: <!-- navigator --> <div class="navi"></div> <!-- prev link --> <a class="prev"></a> <!-- root element for scrollable --> <div class="scrollable"> <div id="thu

  • 超级有用的13个基于jQuery的内容滚动插件和教程

    如果你一直想知道这是如何实现的,那么这里的13个 jQuery 内容滚动插件教程将帮助您实现这种效果. jQuery Tools Scrollable AnythingSlider jQuery Plugin Sliding Boxes and Captions with jQuery Making a Content Slider with jQuery UI Creating a Slick Auto-Playing Featured Content Slider Create Featur

  • 基于jQuery的图片左右无缝滚动插件

    在线演示:http://demo.jb51.net/js/2012/myslideLeftRight/打包下载:http://www.jb51.net/jiaoben/44973.html核心代码: 复制代码 代码如下: (function($){ $.fn.extend({ "slidelf":function(value){ value = $.extend({ "prev":"", "next":""

  • 基于编写jQuery的无缝滚动插件

    首先来看下html骨架,如下: <div class="box"> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> </div> 结构简单明了,没什么说的. 讲下实现原理: div box是最外层盒子,给它指定的宽高,记得给box添加一个 overflow:hidden (超出的内容隐藏)样式,因为滚动肯定是会超出b

随机推荐