Unslider – 轻量的响应式 jQuery 内容滑块插件
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 日历和时间插件
作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。