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图片垂直滚动焦点图
在线演示 本地下载
随机推荐
- Python深入03 对象的属性
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! Python一切皆对象(object),每个对象都可能有多个属性(attribut ...
- 将Word文档发给别人时如何限制别人只能修改文档部分内容
将Word文档发给别人时如何限制别人只能修改文档部分内容 转自:互联网.时间:2014-04-16 作者:snow 来源:互联网 在很多情况下我们都不希望别人修改我们的文档内容,特别实在将W ...
- Excel粘贴到textarea换行符替换
复制到→ Excel列表的内容复制到textarea中后,前台取到的文本是这样的: chrome监视显示 console.log输出 现在需要将excel中的每行数据拼接起来用“;”隔开,方法如下: ...
- 虚拟机与CentOS的安装设置。
点击下一步: 点击稍后安装操作系统. 选择Linux系统,继续下一步 为了方便以后查找文件我们在这把虚拟机的名称改成自己喜欢的, 位置也是在大点的磁盘重新建一个专门存放的文件夹,做到规范. 在这推荐N ...
- Hibernate注解:一对多外键关联
情形:两个表,cms_mode是主表,cms_model_field是子表,cms_model_field的model_id字段关联到cms_model的主键. # # Source for tabl ...
- springMVC整合spring和hibernate4(适合于框架的搭建)
基础的东西不再详细说明,只在这里说明一下主要的配置文件,如何通过配置文件取得sessionFactory . 步骤: 1:在web.xml中引入springmvc的配置文件springmvc.xml( ...
- 页面设计--Tree目录树
Tree目录树控件属性: 根据数据集合来配置相应的信息 加载模式有自动加载.自定加载 web中显示效果图:
- xcode C++一些简单设置
下面是一个要用到mysql库的C++程序设置: 添加用户头文件: 双击项目-Build Settings-Search Paths: Library Search Paths: /usr/local/ ...
- 关于前置式递增和后置式递增的小知识(++x与x++)
list<char>::iterator pos; //list<char> coll; for(pos=coll.begin();pos!=coll.end();++pos) ...
- GoldenGate: Extract Abend with Detect Inconsistency in Pdata (文档 ID 1355067.1)
APPLIES TO: Oracle GoldenGate - Version 10.4.0.0 and laterInformation in this document applies to an ...