`
fackyou200
  • 浏览: 312505 次
  • 性别: Icon_minigender_1
  • 来自: 山西太原
社区版块
存档分类
最新评论

jQuery 多功能无缝滚动插件

 
阅读更多
/***
 @description 基于 jQuery 的多功能无缝滚动插件
 @params auto: true                     # 是否自动滚动
         interval: 3000                 # 间隔时间(毫秒)
         direction: 'forward'           # 向前 -  forward / 向后 - backward
         speed: 500                     # 移动速度(毫秒)
         showNum: 1                     # 显示个数
         stepLen: 1                     # 每次滚动步长
         type: 'horizontal'             # 水平滚动 - horizontal / 垂直滚动 - vertical
         prevElement: null              # 上一组按钮元素
         prevBefore: function() {}      # 上一组移动前回调
         prevAfter: function() {}       # 上一组移动后回调
         nextElement: null              # 下一组按钮元素
         nextBefore: function() {}      # 下一组移动前回调
         nextAfter: function() {}       # 下一组移动后回调
         pauseElement: null             # 暂停按钮元素
         pauseBefore: function() {}     # 暂停前回调
         pauseAfter: function() {}      # 暂停后回调
         resumeElement: null            # 继续按钮元素
         resumeBefore: function() {}    # 继续前回调
         resumeAfter: function() {}     # 继续后回调
 @author i@wange.im
 @url https://github.com/wange1228/marquee-slide
 @blog http://wange.im
 @version 0.4.3
***/

 

demo地址:http://wange.im/demo/marquee-slide/marquee_slide.html

 

滚动区域:div内容为ul li如下:

<div id="wrap1" class="wrap">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
</div>
<script type="text/javascript">
    $(function() {
        $('#wrap1').marquee();
    })
</script>

 

如果滚动区域内容是div:

<div id="wrap2" class="wrap">
    <div class="ul">
        <div class="li">1</div>
        <div class="li">2</div>
        <div class="li">3</div>
        <div class="li">4</div>
        <div class="li">5</div>
        <div class="li">6</div>
        <div class="li">7</div>
        <div class="li">8</div>
        <div class="li">9</div>
    </div>
</div>
<script type="text/javascript">
    $(function() {
        $('#wrap2').marquee();
    })
</script>

 

分享到:
评论

相关推荐

    myslideLeftRight 基于jQuery图片左右无缝滚动插件.zip

    【myslideLeftRight基于jQuery图片左右无缝滚动插件】是一个常用的前端开发工具,它通过结合JavaScript库jQuery实现图片的平滑、连续且无间隙的左右滚动效果,为网站的展示和用户体验提供了极大的便利。该插件广泛...

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

    **基于jQuery的图片左右无缝滚动插件** 在网页设计中,动态展示图片是常见的需求,而图片无缝滚动则能提供一种优雅的展示方式,增强用户体验。"基于jQuery的图片左右无缝滚动插件"就是用于实现这种效果的工具,它...

    jquery图片无缝滚动插件上下左右图片无缝滚动代码

    总之,jQuery图片无缝滚动插件通过JavaScript的动画功能和事件处理,实现了在网页上图片的平滑、连续滚动,增强了用户体验。开发者可以通过自定义或使用现有的插件来实现这一效果,结合HTML和CSS布局,打造个性化的...

    jQuery实现网站中公告上下无缝滚动,marquee

    jQuery 是一个广泛使用的 JavaScript 库,它简化了DOM操作、事件处理和动画效果,因此用jQuery来实现公告的上下无缝滚动是理想的选择。在本教程中,我们将深入探讨如何使用jQuery实现这个功能。 首先,我们需要在...

    jQuery无缝滚动

    **jQuery无缝滚动插件详解** 在网页设计中,为了提供更好的用户体验,许多开发者选择使用jQuery无缝滚动效果。这种效果能够使页面内容以平滑、连续的方式展现,为用户带来无中断的浏览体验。jQuery,一个强大的...

    jQuery滚动插件

    jQuery滚动插件是用于增强网页滚动效果的一种JavaScript库,它能够帮助开发者轻松实现平滑滚动、无限滚动、滚动监听等多种功能,极大地提升了用户体验。在网页设计中,滚动效果是一个重要的组成部分,它能引导用户...

    jquery无缝滚动

    为了方便开发,有许多预封装的jQuery无缝滚动插件可供使用,例如`jQuery.scrollable`、`jQuery.Marquee`等。这些插件通常提供了更多的自定义选项和事件处理功能,例如鼠标悬停暂停、导航点控制等。 ### 图片轮播与...

    jquery图片无缝滚动代码左右上下无缝滚动图片

    **jQuery图片无缝滚动代码**是一种常见的网页动态效果,用于实现图片的自动循环播放,为用户提供更生动、交互性更强的浏览体验。这种技术通常应用于网站的轮播图、产品展示或者新闻更新等区域,能够有效地吸引用户的...

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

    ### jcarousellite.js 基于Jquery的图片无缝滚动插件 #### 简介 `jcarousellite.js`是一款轻量级、基于jQuery的图片无缝滚动插件,它可以帮助开发者轻松地在网页上实现图片轮播效果。这款插件的主要特点在于其简单...

    jquery多功能插件支持无缝图片滚动,选项卡切换,焦点图片切换,点击弹出层等

    《jQuery多功能插件详解——打造丰富的网页交互体验》 在网页设计与开发中,jQuery库以其简洁的API和强大的功能,成为了JavaScript开发者的首选工具。本文将深入探讨一个基于jQuery的多功能插件,该插件集成了无缝...

    jquery多风格多功能滚动特效代码插件jquery.liMarquee.js下载.zip

    《jQuery多风格多功能滚动特效代码插件:jquery.liMarquee.js》 在Web开发中,动态滚动效果常常被用于展示新闻、广告或者任何需要滚动显示的内容。jQuery作为一个强大的JavaScript库,提供了丰富的API和插件来实现...

    jQuery 无缝图片横向滚动代码

    10. **插件使用**:jQuery社区提供了许多插件来实现各种功能,如jQuery Cycle2或Slick Slider,它们已经封装好了无缝滚动的逻辑,可以简化开发过程。 总之,jQuery无缝图片横向滚动代码的实现涉及到了前端开发的多...

    query图片无缝滚动插件上下左右图片无缝滚动代码.zip

    总的来说,jQuery图片无缝滚动插件是通过JavaScript和CSS实现的一种动态效果,它利用jQuery库的强大功能,让开发者能够快速、高效地创建出平滑、流畅的图片展示效果,从而提升网站的视觉吸引力和用户体验。...

    jQuery kxbdMarquee 无缝滚动

    jQuery kxbdMarquee 是一款基于JavaScript库jQuery的插件,专为实现网页内容的无缝滚动效果而设计。这种滚动效果通常用于新闻标题、广告横幅或其他需要连续展示但空间有限的区域,使得信息能以循环不间断的方式呈现...

    基于jQuery实现一个marquee无缝滚动的插件

    基于jQuery实现的marquee无缝滚动插件,能够扩展jQuery的功能,为网页添加动态的滚动效果。 知识点二:marquee元素 marquee元素是HTML中的一个标签,用于创建自动滚动的文本或图片区域。在早期的网页设计中,...

    jquery多风格多功能滚动特效插件jquery.liMarquee.js源码.zip

    《jQuery多风格多功能滚动特效插件jquery.liMarquee.js源码解析》 在网页开发中,动态滚动效果常常被用于吸引用户的注意力,提升网站的互动性。jQuery作为一款广泛使用的JavaScript库,提供了丰富的插件来实现各种...

    无缝滚动插件(支持切换方向和hover暂停))

    总的来说,无缝滚动插件是一种增强网页交互性的有效手段,通过合理的编程技巧和优化策略,可以让用户在有限的屏幕空间内浏览到更多的信息。对于前端开发者来说,掌握这类插件的实现原理和应用是非常有价值的技能。

    图片、文字不间断无缝滚动插件

    【图片、文字不间断无缝滚动插件】是一种网页动态效果技术,它使得图片和文字能够在页面上连续、平滑地滚动,提升网站的视觉吸引力和用户体验。这种插件通常基于JavaScript库,如jQuery,来实现,使得开发过程更为...

Global site tag (gtag.js) - Google Analytics