marquee.js – jQuery 多功能无缝滚动插件

图片滚动

这个基于 jQuery 的多功能无缝滚动插件是我在几个月之前就写好的，只是碍于时间没有把插件公开出来，近段时间，这个插件陆续在公司的几个项目中得到应用，尝试效果还算不错，期间也修复了一些 bug，自我感觉这个插件在功能上已经比较成熟，可以在大多数的无缝滚动文字或者轮播图上一展身手，现在就分享给大家。

首先，来说明一下，这个“多功能”无缝滚动插件，到底怎么“多功能”？marquee.js 插件一共提供了 19 个可选的配置参数，是我所能想到的一般无缝滚动所可能涉及到的多样化了。

<div id="wrap3" 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>

$(function() {
  $('#wrap3').marquee({
   auto: true,
   interval: 3000,
   speed: 500,
   showNum: 5,
   stepLen: 5
  });
 })

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() {} // 继续后回调

http://wange.im/marquee-js-jquery-scroll-plugin.html

marquee.js - jQuery 多功能无缝滚动插件