今天爱编程小编给大家分享一款非常绚丽的jQuery焦点图插件,同时这款焦点图也利用了HTML5和CSS3的相关特性,使图片切换效果更加丰富多彩。另外,这款jQuery焦点图插件的特点是全屏的效果,因此看上去也非常的大气和整体。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

<div id="wrapper">
<div class="fullwidthbanner-container">
<div class="fullwidthbanner">
<ul>
<li data-transition="3dcurtain-horizontal" data-slotamount="15" data-masterspeed="300">
<img src="data:images/slides/slide3.jpg" alt="" />
</li>
<li data-transition="3dcurtain-vertical" data-slotamount="15" data-masterspeed="300"
data-link="#">
<img src="data:images/slides/slide5.jpg" alt="" />
</li>
<li data-transition="papercut" data-slotamount="15" data-masterspeed="300" data-link="#">
<img src="data:images/slides/slide2.jpg" alt="" />
</li>
<li data-transition="turnoff" data-slotamount="15" data-masterspeed="300">
<img src="data:images/slides/slide1.jpg" alt="" />
</li>
<li data-transition="flyin" data-slotamount="15" data-masterspeed="300">
<img src="data:images/slides/slide6.jpg" alt="" />
</li>
</ul>
</div>
</div>
</div>

  via:http://www.w2bc.com/Article/15711

一款基于jQuery和HTML5全屏焦点图的更多相关文章

  1. 【转载总结】jQuery和HTML5全屏焦点图

    选项设置与说明 Slider Revolution提供了很多参数选项设置: delay: 滑动内容停留时间.默认9000毫秒 startheight: 滑动内容高度,默认490像素. startwid ...

  2. 一款基于jQuery的图片左右滑动焦点图

    今天给大家分享一款基于jQuery的焦点图插件,这款jQuery焦点图插件的特点是可以多张图片左右滑动切换,可以点击切换按钮进行图片滑动,同时也支持图片自动切换.另外,这款jQuery焦点图是宽屏的, ...

  3. 一款基于jQuery底部带缩略图的焦点图

    之前我们已经分享过不少实用的jQuery焦点图插件了,今天我们要介绍的这款jQuery焦点图插件是带有缩略图的,我们只需点击缩略图即可切换至相应的图片,图片切换的时候出现淡入淡出的动画效果. 在线预览 ...

  4. 基于jQuery仿Flash横向切换焦点图

    给各网友分享一款基于jQuery仿Flash横向切换焦点图.利用Flash可以制作很多漂亮的图片相册应用,今天我们要用jQuery来实现这样的效果.它是一款仿Flash的横向图片切换焦点图插件,可以自 ...

  5. 基于jQuery商城网站全屏图片切换代码

    基于jQuery商城网站全屏图片切换代码.这是一款商城网站全屏多张图片滑动切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="slid ...

  6. 基于HTML5全屏图文左右滑动切换特效

    基于HTML5全屏图文左右滑动切换特效.这是一款基于jQuery+HTML5实现的全屏图文切换特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <main> & ...

  7. 10款基于jquery实现的超酷动画源码

    1.jQuery二级下拉菜单 下拉箭头翻转动画 之前我们分享过不少基于jQuery的二级下拉菜单,甚至是多级的下拉菜单,比如这款jQuery/CSS3飘带状多级下拉菜单就非常华丽.但今天要介绍的这款j ...

  8. 一款基于jQuery的图片分组切换焦点图插件

    这是一款基于jQuery的图片切换焦点图插件,这款jQuery焦点图插件的特点是图片可以分组切换,也就是说一次可以切换多张图片,相比其他焦点图插件,它能节省更多的空间,可以向用户展示更多的图片,非常实 ...

  9. HTML5全屏浏览器兼容方案

    最近一个项目有页面全屏的的需求,搜索了下有HTML5的全屏API可用,不过各浏览器的支持不一样. 标准 webkit  Firefox  IE Element.requestFullscreen() ...

随机推荐

  1. java页面url传值中文编码&解码

    URL参数中有中文值,传到服务端,在用request.getParameter()方法,得到的常常会是乱码. 这将涉及到字符解码操作,我们在应用中常常会用new String(fieldType.ge ...

  2. SVN — subclipse操作指引

    摘自: http://jiangzhengjun.iteye.com/blog/491824 安装插件:请参照http://subclipse.tigris.org/servlets/ProjectP ...

  3. hihoCoder 1261 String Problem II

    时间限制:50000ms 单点时限:5000ms 内存限制:512MB 描写叙述 我们有一个字符串集合S,当中有N个两两不同的字符串.还有M个询问,每一个询问都会先给出一个字符串w,你须要回答下面三个 ...

  4. 算法笔记_040:二进制幂(Java)

    目录 1 问题描述 2 解决方案 2.1 从左至右二进制幂 2.2 从右至左二进制幂   1 问题描述 使用n的二进制表示,计算a的n次方. 2 解决方案 2.1 从左至右二进制幂 此方法计算a的n次 ...

  5. 通过源码浅析Java中的资源加载

    前提 最近在做一个基础组件项目刚好需要用到JDK中的资源加载,这里说到的资源包括类文件和其他静态资源,刚好需要重新补充一下类加载器和资源加载的相关知识,整理成一篇文章. 理解类的工作原理 这一节主要分 ...

  6. zuul源码分析-探究原生zuul的工作原理

    前提 最近在项目中使用了SpringCloud,基于zuul搭建了一个提供加解密.鉴权等功能的网关服务.鉴于之前没怎么使用过Zuul,于是顺便仔细阅读了它的源码.实际上,zuul原来提供的功能是很单一 ...

  7. Linux crond实例

    linux系统的定时任务: 1:linux系统自身定期执行的任务工作:系统周期性执行的任务工作,如轮询系统日志,备份系统数据,清理系统缓存等. [root@10-4-5-9 ~]# ll /var/l ...

  8. android使用全局变量传递数据

    android中Application是用来保存全局变量的,在package创建的时候就存在了,到所有的activity都被destroy掉之后才会被释放掉.所以当我们需要全局变量的时候只要在appl ...

  9. Linux-软件包管理-yum在线管理-yum命令

    yum list 查看所有可用软件包列表 vim /etc/yum.repos.d/CentOS-Base.repo 查看当前linux系统默认的网络yum源信息 yum search httpd 搜 ...

  10. zoj 2921 Stock(贪心)

    Optiver sponsored problem. After years of hard work Optiver has developed a mathematical model that ...