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

引入所需的js文件

<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              //  支持响应式设计

});