前端里Unslider 是一款非常轻量的 jQuery 插件（压缩后只有 1KB），能够用于任何 HTML 内容的滑动。可以响应容器的大小变化，自动排布不用大小的滑块。可以通过整合 jQuery.event.swipe 来让其支持触屏设备的滑动功能。
使用方法：
引入 jQuery 和 Unslider：
<script src="//code.jquery.com/jquery-latest.min.js"></script> <script src="//unslider.com/unslider.js"></script>
编写 HTML 无序列表：
<div class="banner"> <ul> <li>This is a slide.</li> <li>This is another slide.</li> <li>This is a final slide.</li> </ul> </div>
使用 CSS 美化外观：
.banner { position: relative; overflow: auto; } .banner li { list-style: none; } .banner ul li { float: left; }
最后就是调用插件：
$('.banner').unslider({ speed: 500, // 滚动速度 delay: 3000, // 动画延迟 complete: function() {}, // 动画完成的回调函数 keys: true, // 启动键盘导航 dots: true, // 显示点导航 fluid: false // 支持响应式设计 });
您可能感兴趣的相关文章
- 期待已久的2012年度最佳 jQuery 插件揭晓
- 精心挑选的优秀jQuery Ajax分页插件和教程
- 推荐几款非常棒的 jQuery 全景图片展示插件
- 12款经典的白富美型 jQuery 图片轮播插件
- 精心挑选优秀的 JavaScript 日历和时间插件
用 JavaScript 实现一个很牛的扫码功能
