今天爱编程小编给大家分享一款非常绚丽的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. Tensorflow 之 name/variable_scope 变量管理

    name/variable_scope 的作用 充分理解 name / variable_scope TensorFlow 入门笔记 当一个神经网络比较复杂.参数比较多时,就比较需要一个比较好的方式来 ...

  2. 不要让Javascript的等价表格看上去那么难看

    时不时的会有人贴出一张表格,用来展现javascript的 '==' 比较出来的结果.像最近的这个例子,看看这张表格有多么的无序. 这些文章基本上都是对的,他们指出 '==' 设计的很糟糕.但是他们通 ...

  3. IOS UITableView删除功能

    UITbableView作为列表展示信息,除了展示的功能,有时还会用到删除,比如购物车等.删除功能可以直接使用系统自带的删除功能,当横向轻扫cell时,右侧出现红色的删除按钮,点击删除当前cell. ...

  4. linux 基本命令学习

    原文: https://www.oschina.net/translate/useful-linux-commands-for-newbies?lang=chs&p=2

  5. 【pyhon】nvshens图片批量下载爬虫1.01

    # nvshens图片批量下载爬虫1.01 # 原先版本在遇到网络故障时回下载不全,这回更改了模式使得下载不成就重新下载,直到全部下载完毕 from bs4 import BeautifulSoup ...

  6. Oracle spatial 空间修正函数(SDO_UTIL.RECTIFY_GEOMETRY)

    Oracle spatial有个空间修正函数SDO_UTIL.RECTIFY_GEOMETRY,它可以修复以下可能:a.重复节点 b.自相交 c.坐标串朝向不正确. 该函数的构造函数格式: SDO_U ...

  7. onvif获取摄像头的流媒体地址完整流程

    linux设备上的Onvif 实现6:获取摄像头的流媒体地址完整流程 整体流程: Probe: 发现网络摄像头,获取webserver地址 http://192.168.15.240/onvif/de ...

  8. JDK中枚举的底层实现

    前提 上一篇文章复习介绍了JDK中注解的底层实现,跟注解一样比较常用,但是底层实现比较神秘的还有枚举类型.趁着国庆假期的最后两天,把JDK中枚举的底层实现也进行一次探究. 通过例子查找本质 在探究JD ...

  9. ThinkPad如何修改fn键默认操作

    ThinkPad如何修改fn键默认操作 ThinkPad笔记本如何修改fn键默认操作 Fn键F1-F12

  10. Python break

    break退出循环 用 for 循环或者 while 循环时,如果要在循环体内直接退出循环,可以使用 break 语句. 比如计算1至100的整数和,我们用while来实现: sum = 0 x = ...