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代码
Aug 13 Javascript
jquery 常用操作整理 基础入门篇
Oct 14 Javascript
jquery控制左右箭头滚动图片列表的实例
May 20 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
Feb 14 Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
Jun 02 Javascript
Vue表单demo v-model双向绑定问题
Jun 29 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
May 10 Javascript
微信小程序实现点击按钮后修改颜色
Dec 05 Javascript
json解析大全 双引号、键值对不在一起的情况
Dec 06 Javascript
JavaScript oncopy事件用法实例解析
May 13 Javascript
利用js实现简单开关灯代码
Nov 23 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开发中四种查询返回结果分析
2011/01/02 PHP
destoon实现不同会员组公司名称显示不同的颜色的方法
2014/08/22 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
Smarty模板引擎缓存机制详解
2016/05/23 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
Javascript循环删除数组中元素的几种方法示例
2017/05/18 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
Vue实现圆环进度条的示例
2021/02/06 Vue.js
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
运用TensorFlow进行简单实现线性回归、梯度下降示例
2018/03/05 Python
python实现事件驱动
2018/11/21 Python
Python饼状图的绘制实例
2019/01/15 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
HTML5之语义标签介绍
2016/07/07 HTML / CSS
UGG雪地靴德国官网:UGG德国
2016/11/19 全球购物
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
一个精品风格的世界:Atterley
2019/05/01 全球购物
会计学应届毕业生推荐信
2013/11/04 职场文书
幼儿发展评估方案
2014/06/11 职场文书
教师党员个人自我评价
2015/03/04 职场文书
2016新年年会主持词
2015/07/06 职场文书