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 相关文章推荐
jQuery编写widget的一些技巧分享
Oct 28 Javascript
深入理解javascript构造函数和原型对象
Sep 23 Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
Feb 25 Javascript
基于javascript显示当前时间以及倒计时功能
Mar 18 Javascript
js基本算法:冒泡排序,二分查找的简单实例
Oct 08 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
js实现数组和对象的深浅拷贝
Sep 30 Javascript
基于原生js运动方式关键点的总结(推荐)
Oct 01 Javascript
javascript中UMD规范的代码推演
Aug 29 Javascript
基于javascript实现贪吃蛇经典小游戏
Apr 10 Javascript
JavaScript实现前端网页版倒计时
Mar 24 Javascript
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下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
十大使用PHP框架的理由
2015/09/26 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
浅谈javascript的数据类型检测
2010/07/10 Javascript
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
2014/12/15 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
详解Python之unittest单元测试代码
2018/01/24 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
JD Sports比利时官网:英国领先的运动鞋和运动服饰零售商
2018/10/10 全球购物
培训主管的岗位职责
2013/11/23 职场文书
送餐员岗位职责范本
2014/02/21 职场文书
管理学院毕业生自荐信范文
2014/03/10 职场文书
医学生就业推荐表自我鉴定
2014/03/26 职场文书
外语专业毕业生自荐信
2014/04/14 职场文书
酒店开业庆典策划方案
2014/05/28 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang