jQuery插件Skippr实现焦点图幻灯片特效


Posted in Javascript onApril 12, 2015
史上效果最好的焦点图幻灯片jQuery插件Skippr,轻量级插件、响应式布局插件,强大的参数自定义
配置,可自定义切换速度、切换方式、是否显示左右箭头、是否自动播放、自动播放间隔时间等配置
参数,调用插件也非常简单易用,调用方式下面介绍下:
jQuery插件Skippr实现焦点图幻灯片特效
1.加载jQuery和插件
<link rel="stylesheet" href="css/jquery.skippr.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.skippr.min.js"></script>
2.HTML内容
<div id="container"> 
    <div id="theTarget"> 
    <div style="background-image: url(img/image1.jpg)"></div> 
    <div style="background-image: url(img/image2.jpg)"></div> 
    <div style="background-image: url(img/image3.jpg)"></div> 
    <div style="background-image: url(img/image4.jpg)"></div> 
   <div style="background-image: url(img/image5.jpg)"></div> 
  </div>   
</div>
3.函数调用
<script> 
 $(document).ready(function(){ 
 
     $("#theTarget").skippr({ 
 
      transition: 'slide', 
      speed: 1000, 
      easing: 'easeOutQuart', 
      navType: 'block', 
      childrenElementType: 'div', 
      arrows: true, 
      autoPlay: false, 
      autoPlayDuration: 5000, 
      keyboardOnAlways: true, 
      hidePrevious: false 
    });       
 
  }); 
</script>
参数配置解释
transition :(fade/slide)切换方式
speed : 切换速度(毫秒)
easing :切换效果(easeOutQuart)
navType :下面导航类型(block/bubble)
arrows :是否有箭头(true/false)
autoPlay :是否自动播放(true/false)
autoPlayDuration : 自动播放间隔(毫秒)
keyboardOnAlways :是否支持键盘切换(true/false)
hidePrevious :是否隐藏第一张已经切换后的箭头(true/false)
查看DEMO   脚本下载

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
克隆javascript对象的三个方法小结
Jan 12 Javascript
jquery ready函数、css函数及text()使用示例
Sep 27 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
Angularjs 基础入门
Dec 26 Javascript
JSON相关知识汇总
Jul 03 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
AngularJS进行性能调优的7个建议
Dec 28 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
Dec 31 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
详解vue3中组件的非兼容变更
Mar 03 Vue.js
jQuery插件pagination实现分页特效
Apr 12 #Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 #Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 #Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 #Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 #Javascript
jQuery插件MixItUp实现动画过滤和排序
Apr 12 #Javascript
jQuery实现简单二级下拉菜单
Apr 12 #Javascript
You might like
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
10个php函数实用却不常见
2015/10/13 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
PHP+shell脚本操作Memcached和Apache Status的实例分享
2016/03/11 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
PHP中PCRE正则解析代码详解
2019/04/26 PHP
laravel框架数据库配置及操作数据库示例
2019/10/10 PHP
可选择和输入的下拉列表框示例
2013/11/05 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
2014/05/14 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
javascript表格的渲染组件
2015/07/03 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017/01/10 Javascript
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
在angular 6中使用 less 的实例代码
2018/05/13 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
2019/04/30 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
2020/09/24 Javascript
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
详解python数据结构和算法
2019/04/18 Python
PyQt 图解Qt Designer工具的使用方法
2019/08/06 Python
Python如何将装饰器定义为类
2020/07/30 Python
python中温度单位转换的实例方法
2020/12/27 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
将"引用"作为函数参数有哪些特点
2013/04/05 面试题
文科教师毕业的自我评价
2014/01/16 职场文书
2014年计划生育协会工作总结
2014/11/14 职场文书
工人先进事迹材料
2014/12/26 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
飞屋环游记观后感
2015/06/08 职场文书
HDFS免重启挂载新磁盘
2022/04/06 Servers