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 相关文章推荐
父子窗体间传递JSON格式的数据的代码
Dec 25 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
Jan 31 Javascript
使用jquery实现简单的ajax
Jul 08 Javascript
JavaScript检查某个function是否是原生代码的方法
Aug 20 Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
js实现倒计时效果(小于10补零)
Mar 08 Javascript
JavaScript实现新年倒计时效果
Nov 17 Javascript
详解Element 指令clickoutside源码分析
Feb 15 Javascript
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 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语言构造器介绍
2013/07/08 PHP
yii上传文件或图片实例
2014/04/01 PHP
CodeIgniter安全相关设置汇总
2014/07/03 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
一波PHP中cURL库的常见用法代码示例
2016/05/06 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
Alliance vs AM BO3 第二场2.13
2021/03/10 DOTA
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
在Javascript中处理数组之toSource()方法的使用
2015/06/09 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
JavaScript中localStorage对象存储方式实例分析
2017/01/12 Javascript
基于vue2.0实现简单轮播图
2017/11/27 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
深入Python函数编程的一些特性
2015/04/13 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
简单了解python的内存管理机制
2019/07/08 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
销售简历自我评价
2014/01/24 职场文书
驾驶员培训方案
2014/05/01 职场文书
授权委托书公证
2014/09/14 职场文书
2015年暑期见闻
2015/07/14 职场文书