今天爱编程小编给大家分享一款非常绚丽的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. HYSBZ 1012 最大数maxnumber

    思路:在单调队列不更新列首.由于查询区间大小不确定,所以不能保证下次是否还用到它 #include <cstdio> #include <cstring> #include & ...

  2. WCF 之 生成元数据和代理

    在WCF开发概述中讲解了手工方式的WCF应用,其实实际开发中使用更多的使用配置方式和元数据来实现WCF,下面我们来看一个具体的Demo,这个例子和WCF开发概述中使用的是同一个例子,只是实现方式不同, ...

  3. tomcat支持中文文件名下载

    http://blog.csdn.net/wnczwl369/article/details/7483806 Tomcat 是Java开发者使用得较多的一个Web服务器,因为它占用资源小,运行速度快等 ...

  4. 使用 RDVTabBarController 制作底部凸起的 TabBar 笔记

    欢迎訪问我的个人博客http://mmoaay.photo/ 本文主要针对底部凸起的 TabBar 这样的特殊需求,不感兴趣的能够直接绕过- 近期做的一个项目须要底部凸起的 TabBar,效果例如以下 ...

  5. QtGui.QPen

    The QtGui.QPen is an elementary graphics object. It is used to draw lines, curves and outlines of re ...

  6. 你远比想象中强大pdf

      读后感: 序 一.强化自我认知 认识你自己 你认为什么东西是最重要的呢? 这个问题的答案就是价值观. 让定期审视人生成为习惯 除去恐惧 树立目标 二.改变思维模式 选择,记住你的选择(做决定) 巅 ...

  7. How to make a custom WIDGET in OpenERP

    转自:http://sahotaparamjitsingh.blogspot.com/2012/04/how-to-make-custom-widget-in-openerp.html   Hello ...

  8. NSArray利用Cocoa框架进行汉字排序

    NSArray利用Cocoa框架进行汉字排序 在NSString有一个函数localizedCompare:,它的功能是通过自身与给定字符串的比較,返回一个本地化的比較结果.也就是说这个函数是支持汉字 ...

  9. 项目启动时 Exception in thread "HouseKeeper" java.lang.NullPointerException

    首先查看是否是端口冲突引起,在日志信息该错误位置往上找,如果再无错误信息,而只有该错误,则原因可能如下: 原因: This is because Proxool is not being shutdo ...

  10. axure rp 8.0

    授权人:University of Science and Technology of China (CLASSROOM) 授权密钥:DTXRAnPn1P65Rt0xB4eTQ+4bF5IUF0gu0 ...