Unslider – 轻量的响应式 jQuery 内容滑块插件

来源:互联网 发布:中山大学网络新ip 编辑:程序博客网 时间:2024/05/18 03:29

引入 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              //  支持响应式设计});
0 0
原创粉丝点击