skippr 优势:
<ul class='ul_demo'> <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 class="cur" href="http://www.sucaihuo.com/jquery/demo/206/index.html">1、默认</a> <a href="http://www.sucaihuo.com/jquery/demo/206/index2.html">2、遮罩高度</a> <a href="http://www.sucaihuo.com/jquery/demo/206/index3.html">3、HTML data属性</a> <a href="http://www.sucaihuo.com/jquery/demo/206/index4.html">4、动画时间</a> <a href="http://www.sucaihuo.com/jquery/demo/206/index5.html">5、字体颜色</a> <a href="http://www.sucaihuo.com/jquery/demo/206/index6.html">6、背景颜色</a> <a href="http://www.sucaihuo.com/jquery/demo/206/index7.html">7、反向</a> <a href="http://www.sucaihuo.com/jquery/demo/206/index8.html">8、文字排版</a> <a href="http://www.sucaihuo.com/jquery/demo/206/index9.html">9、禁用链接</a>
skippr相关API
参数 | 描述 | 默认值 |
transition | 切换方式,可选 slide(幻灯片) 或 fade(淡入淡出) | slide |
speed | 切换过度时间,以毫秒为单位 | 1000 |
easing | 切换动画效果,支持所有 jquery UI 动画效果 | easeOutQuart |
navType | 项目导航方式,可选 block(块状)或 bubble(圆点) | block |
childrenElementType | 选择目标元素的子元素类型,可选 div 或 img | div |
arrows | 显示左右控制箭头 | true |
autoPlay | 自动播放 | false |
autoPlayDuration | 自动播放间隔,以毫秒为单位 | 5000 |
keyboardOnAlways | 键盘方向键控制 | true |
hidePrevious | 显示第一张幻灯片时隐藏“上一个”箭头 | block |
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791