一款基于jQuery和HTML5全屏焦点图
今天爱编程小编给大家分享一款非常绚丽的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全屏焦点图的更多相关文章
- 【转载总结】jQuery和HTML5全屏焦点图
选项设置与说明 Slider Revolution提供了很多参数选项设置: delay: 滑动内容停留时间.默认9000毫秒 startheight: 滑动内容高度,默认490像素. startwid ...
- 一款基于jQuery的图片左右滑动焦点图
今天给大家分享一款基于jQuery的焦点图插件,这款jQuery焦点图插件的特点是可以多张图片左右滑动切换,可以点击切换按钮进行图片滑动,同时也支持图片自动切换.另外,这款jQuery焦点图是宽屏的, ...
- 一款基于jQuery底部带缩略图的焦点图
之前我们已经分享过不少实用的jQuery焦点图插件了,今天我们要介绍的这款jQuery焦点图插件是带有缩略图的,我们只需点击缩略图即可切换至相应的图片,图片切换的时候出现淡入淡出的动画效果. 在线预览 ...
- 基于jQuery仿Flash横向切换焦点图
给各网友分享一款基于jQuery仿Flash横向切换焦点图.利用Flash可以制作很多漂亮的图片相册应用,今天我们要用jQuery来实现这样的效果.它是一款仿Flash的横向图片切换焦点图插件,可以自 ...
- 基于jQuery商城网站全屏图片切换代码
基于jQuery商城网站全屏图片切换代码.这是一款商城网站全屏多张图片滑动切换代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="slid ...
- 基于HTML5全屏图文左右滑动切换特效
基于HTML5全屏图文左右滑动切换特效.这是一款基于jQuery+HTML5实现的全屏图文切换特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <main> & ...
- 10款基于jquery实现的超酷动画源码
1.jQuery二级下拉菜单 下拉箭头翻转动画 之前我们分享过不少基于jQuery的二级下拉菜单,甚至是多级的下拉菜单,比如这款jQuery/CSS3飘带状多级下拉菜单就非常华丽.但今天要介绍的这款j ...
- 一款基于jQuery的图片分组切换焦点图插件
这是一款基于jQuery的图片切换焦点图插件,这款jQuery焦点图插件的特点是图片可以分组切换,也就是说一次可以切换多张图片,相比其他焦点图插件,它能节省更多的空间,可以向用户展示更多的图片,非常实 ...
- HTML5全屏浏览器兼容方案
最近一个项目有页面全屏的的需求,搜索了下有HTML5的全屏API可用,不过各浏览器的支持不一样. 标准 webkit Firefox IE Element.requestFullscreen() ...
随机推荐
- Tensorflow 之 name/variable_scope 变量管理
name/variable_scope 的作用 充分理解 name / variable_scope TensorFlow 入门笔记 当一个神经网络比较复杂.参数比较多时,就比较需要一个比较好的方式来 ...
- 不要让Javascript的等价表格看上去那么难看
时不时的会有人贴出一张表格,用来展现javascript的 '==' 比较出来的结果.像最近的这个例子,看看这张表格有多么的无序. 这些文章基本上都是对的,他们指出 '==' 设计的很糟糕.但是他们通 ...
- IOS UITableView删除功能
UITbableView作为列表展示信息,除了展示的功能,有时还会用到删除,比如购物车等.删除功能可以直接使用系统自带的删除功能,当横向轻扫cell时,右侧出现红色的删除按钮,点击删除当前cell. ...
- linux 基本命令学习
原文: https://www.oschina.net/translate/useful-linux-commands-for-newbies?lang=chs&p=2
- 【pyhon】nvshens图片批量下载爬虫1.01
# nvshens图片批量下载爬虫1.01 # 原先版本在遇到网络故障时回下载不全,这回更改了模式使得下载不成就重新下载,直到全部下载完毕 from bs4 import BeautifulSoup ...
- Oracle spatial 空间修正函数(SDO_UTIL.RECTIFY_GEOMETRY)
Oracle spatial有个空间修正函数SDO_UTIL.RECTIFY_GEOMETRY,它可以修复以下可能:a.重复节点 b.自相交 c.坐标串朝向不正确. 该函数的构造函数格式: SDO_U ...
- onvif获取摄像头的流媒体地址完整流程
linux设备上的Onvif 实现6:获取摄像头的流媒体地址完整流程 整体流程: Probe: 发现网络摄像头,获取webserver地址 http://192.168.15.240/onvif/de ...
- JDK中枚举的底层实现
前提 上一篇文章复习介绍了JDK中注解的底层实现,跟注解一样比较常用,但是底层实现比较神秘的还有枚举类型.趁着国庆假期的最后两天,把JDK中枚举的底层实现也进行一次探究. 通过例子查找本质 在探究JD ...
- ThinkPad如何修改fn键默认操作
ThinkPad如何修改fn键默认操作 ThinkPad笔记本如何修改fn键默认操作 Fn键F1-F12
- Python break
break退出循环 用 for 循环或者 while 循环时,如果要在循环体内直接退出循环,可以使用 break 语句. 比如计算1至100的整数和,我们用while来实现: sum = 0 x = ...