jQuery 多功能无缝滚动插件

15 篇文章 0 订阅
/***
 @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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值