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 [email protected]
@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>