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>
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17