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>

相关推荐