skippr演示7种不同的幻灯片效果

来源:https://www.sucaihuo.com/js/206.html 2015-08-20 10:36浏览(1371) 收藏

skippr是一个轻快的基于jQuery的幻灯片插件,兼容主流浏览器,并且有常用的api。
skippr演示7种不同的幻灯片效果
分类:图片代码 > 图片插件 难易:初级
查看演示 下载资源 下载积分: 20 积分

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
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2