jQuery插件Skippr实现焦点图
<link rel="stylesheet" href="css/jquery.skippr.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.skippr.min.js"></script>
<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>
<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>
以上所述就是本文的全部内容了,希望大家能够喜欢。
jQuery插件Skippr实现焦点图的更多相关文章
- 一款基于jQuery轮播切换焦点图,可播放多张图片
今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...
- 基于jQuery的轮播焦点图图
轮播焦点图 ——仿淘宝首页jquery轮播焦点图,我特意去taobao首页看了下它的轮播,好像有点相似,我不保证是我写的这样. 本例来源:站长之家http://sc.chinaz.com/jiaobe ...
- jQuery全屏动画焦点图
效果:http://hovertree.com/texiao/jqimg/3/ 本效果使用 jquery-1.8.3.min.js,如需使用1.12.3版本,需进行修改. 全部版本jQuery下载:h ...
- jquery不限图片焦点图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery鼠标滑动切换焦点图
在线演示 本地下载
- jQuery图片分组切换焦点图
在线演示 本地下载
- jQuery垂直滑动切换焦点图
在线演示 本地下载
- jQuery全屏图片焦点图
在线演示 本地下载
- jQuery图片垂直滚动焦点图
在线演示 本地下载
随机推荐
- Jmeter监控系统等资源,ServerAgent端口的修改
默认情况下在下载的ServerAgent下,如果服务是windows系统,则直接启动"startAgent.bat"即可,如果是Linux系统,则直接启动"./start ...
- [ActionScript 3.0] 跨域策略文件crossdomain.xml配置详解
1.简介 flash在跨域时唯一的限制策略就是crossdomain.xml文件,该文件限制了flash是否可以跨域读写数据以及允许从什么地方跨域读写数据. 位于www.a.com域中的SWF文件要访 ...
- [AIR] Screen 的应用
Screen 类提供此应用程序的可用显示屏幕的相关信息. 屏幕是位于可能更大的“虚拟桌面”内的独立桌面区域.虚拟桌面的原点是操作系统指定的主屏幕的左上角.因此,个别显示屏幕范围的坐标可能是负数.虚拟桌 ...
- JDBC中的批量插入和乱码解决
字符集-乱码问题 用JDBC访问MySql数据库的时候,如果JDBC使用的字符集和MySql使用的字符集不一致,那么会导致乱码发生.解决办法当时是在使用JDBC的时候指定和数据库一样的字符集.我们可以 ...
- 使用 cURL 获取站点的各类响应时间 – dns解析时间,响应时间,传输时间
http://zhangrenfang8738.blog.163.com/blog/static/95401881201142711450245/ curl监控站点响应时间 2011-05-27 11 ...
- ReverseBits
eclipse没问题,leetcode 1不能通过,超出int最大值了,但是怎么转无符号? /*Write a function that takes an unsigned integer and ...
- jxl的API
jxl的API 使用Windows操作系统的朋友对Excel(电子表格)一定不会陌生,但是要使用Java语言来操纵Excel文件并不是一件容易的事.在Web应用日益盛行的今天,通过Web来操作Exce ...
- HDFS Java API 常用操作
package com.luogankun.hadoop.hdfs.api; import java.io.BufferedInputStream; import java.io.File; impo ...
- 初探appium之环境搭建
前段时间一直在折腾python的爬虫,想搞接口自动化.但是写了一个月,发现在我现在的这份的工作中根本接触不到接口.所以就想先放下来,先做点目前能够接触到的,也需要做的东西. 东西越来越多,人手不足.自 ...
- CODESOFT 2015中的二维码该怎样生成
由于二维条码具有储存量大.保密性高.追踪性高.抗损性强.备援性大.成本便宜等特性,其应用 渐趋广泛,因此二维码的制作对于CODESOFT条码设计软件的用户来讲可谓司空见惯.我们最常见的二维码要数QR码 ...