史上效果最好的焦点图幻灯片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)

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

jQuery插件Skippr实现焦点图的更多相关文章

  1. 一款基于jQuery轮播切换焦点图,可播放多张图片

    今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...

  2. 基于jQuery的轮播焦点图图

    轮播焦点图 ——仿淘宝首页jquery轮播焦点图,我特意去taobao首页看了下它的轮播,好像有点相似,我不保证是我写的这样. 本例来源:站长之家http://sc.chinaz.com/jiaobe ...

  3. jQuery全屏动画焦点图

    效果:http://hovertree.com/texiao/jqimg/3/ 本效果使用 jquery-1.8.3.min.js,如需使用1.12.3版本,需进行修改. 全部版本jQuery下载:h ...

  4. jquery不限图片焦点图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jQuery鼠标滑动切换焦点图

    在线演示 本地下载

  6. jQuery图片分组切换焦点图

    在线演示 本地下载

  7. jQuery垂直滑动切换焦点图

    在线演示 本地下载

  8. jQuery全屏图片焦点图

    在线演示 本地下载

  9. jQuery图片垂直滚动焦点图

    在线演示 本地下载

随机推荐

  1. Jmeter监控系统等资源,ServerAgent端口的修改

    默认情况下在下载的ServerAgent下,如果服务是windows系统,则直接启动"startAgent.bat"即可,如果是Linux系统,则直接启动"./start ...

  2. [ActionScript 3.0] 跨域策略文件crossdomain.xml配置详解

    1.简介 flash在跨域时唯一的限制策略就是crossdomain.xml文件,该文件限制了flash是否可以跨域读写数据以及允许从什么地方跨域读写数据. 位于www.a.com域中的SWF文件要访 ...

  3. [AIR] Screen 的应用

    Screen 类提供此应用程序的可用显示屏幕的相关信息. 屏幕是位于可能更大的“虚拟桌面”内的独立桌面区域.虚拟桌面的原点是操作系统指定的主屏幕的左上角.因此,个别显示屏幕范围的坐标可能是负数.虚拟桌 ...

  4. JDBC中的批量插入和乱码解决

    字符集-乱码问题 用JDBC访问MySql数据库的时候,如果JDBC使用的字符集和MySql使用的字符集不一致,那么会导致乱码发生.解决办法当时是在使用JDBC的时候指定和数据库一样的字符集.我们可以 ...

  5. 使用 cURL 获取站点的各类响应时间 – dns解析时间,响应时间,传输时间

    http://zhangrenfang8738.blog.163.com/blog/static/95401881201142711450245/ curl监控站点响应时间 2011-05-27 11 ...

  6. ReverseBits

    eclipse没问题,leetcode 1不能通过,超出int最大值了,但是怎么转无符号? /*Write a function that takes an unsigned integer and ...

  7. jxl的API

    jxl的API 使用Windows操作系统的朋友对Excel(电子表格)一定不会陌生,但是要使用Java语言来操纵Excel文件并不是一件容易的事.在Web应用日益盛行的今天,通过Web来操作Exce ...

  8. HDFS Java API 常用操作

    package com.luogankun.hadoop.hdfs.api; import java.io.BufferedInputStream; import java.io.File; impo ...

  9. 初探appium之环境搭建

    前段时间一直在折腾python的爬虫,想搞接口自动化.但是写了一个月,发现在我现在的这份的工作中根本接触不到接口.所以就想先放下来,先做点目前能够接触到的,也需要做的东西. 东西越来越多,人手不足.自 ...

  10. CODESOFT 2015中的二维码该怎样生成

    由于二维条码具有储存量大.保密性高.追踪性高.抗损性强.备援性大.成本便宜等特性,其应用 渐趋广泛,因此二维码的制作对于CODESOFT条码设计软件的用户来讲可谓司空见惯.我们最常见的二维码要数QR码 ...