skippr 优势：

<ul ><li>支持左右滑动、淡入淡出两种切换方式</li><li>支持左右箭头导航</li><li>支持键盘方向键控制</li><li>支持自动播放</li><li>支持响应式</li><li>支持日志</li></ul>

HTML

<div id="container">
    <div id="skippr">
        <div style="background-image: url(img/img1.jpg)"></div>
        <div style="background-image: url(img/img2.jpg)"></div>
        <div style="background-image: url(img/img3.jpg)"></div>
        <div style="background-image: url(img/img4.jpg)"></div>
        <div style="background-image: url(img/img5.jpg)"></div>
    </div>
</div>

引入jQuery和skippr插件

<link rel="stylesheet" href="css/jquery.skippr.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.skippr.min.js"></script>

jQuery

$(function(){
    $('#skippr').skippr();
});

skippr演示

<a href="https://jy.tp.yuanmeng.life/jquery/demo/206/index.html">1、默认</a><a href="https://jy.tp.yuanmeng.life/jquery/demo/206/index2.html">2、遮罩高度</a><a href="https://jy.tp.yuanmeng.life/jquery/demo/206/index3.html">3、HTML data属性</a><a href="https://jy.tp.yuanmeng.life/jquery/demo/206/index4.html">4、动画时间</a><a href="https://jy.tp.yuanmeng.life/jquery/demo/206/index5.html">5、字体颜色</a><a href="https://jy.tp.yuanmeng.life/jquery/demo/206/index6.html">6、背景颜色</a><a href="https://jy.tp.yuanmeng.life/jquery/demo/206/index7.html">7、反向</a><a href="https://jy.tp.yuanmeng.life/jquery/demo/206/index8.html">8、文字排版</a><a href="https://jy.tp.yuanmeng.life/jquery/demo/206/index9.html">9、禁用链接</a>

skippr相关API