插件描述：jquery图片左右滚动 可选滚动方向 以及同时滚动的数目
插件参数：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $.fn.parallelRoll.defaults = { boxName: 'box', //最外层盒子类名 tagName: 'dd', //滚动标签元素 time: 3000, //滚动间隔时间 direction: 'left', // 动方向 right-->向右 left-->向左 visual: 7, //可视数 prev: 'prev', //向上 next: 'next', //向下 amount: 1 // 滚动数 默认是1}; |
html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <div class="box"> <span class="prev"> 上一张 </span> <dl id="roll"> <dd> <img src="images/1.jpg" /> </dd> <dd> <img src="images/2.jpg" /> </dd> <dd> <img src="images/3.jpg" /> </dd> <dd> <img src="images/4.jpg" /> </dd> <dd> <img src="images/5.jpg" /> </dd> <dd> <img src="images/6.jpg" /> </dd> <dd> <img src="images/7.jpg" /> </dd> <dd> <img src="images/8.jpg" /> </dd> <dd> <img src="images/9.jpg" /> </dd> <dd> <img src="images/10.jpg" /> </dd> </dl> <span class="next"> 下一张 </span></div> |
CSS：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | .box { height: 100px; border: 1px solid red; overflow: hidden; width: 730px; margin: 0 auto; position: relative;}#roll { width: 200 % ;}#roll dd { width: 98px; height: 98px; border: 1px solid#00EE00; float: left; margin - right: 5px;}.box span { position: absolute; bottom: 40 % ; display: inline - block; width: 50px; text - align: center; cursor: pointer; background: red; z - index: 90; color: #fff;}.box.next { right: 0;} |
调用：
1 2 3 4 5 6 7 8 9 | $(document).ready(function() { $("#roll").parallelRoll({ amount: 2 });}); |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 超酷的固定菜单页面滚动效果
- 下一个特效： jQuery幻灯片插件ck-slide