今天爱编程小编给大家分享一款非常绚丽的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. unexpected token: * 和 java.lang.ClassCastException: [Ljava.lang.Object; cannot be cast to 解决办法

    一.unexpected token: *  的解决办法 首先要搞清楚sql与hql的区别! sql操作的是数据库表,而hql操作的是对象! sql中“select * from table”,而hq ...

  2. microsoft visual c++与microsoft visual net 版本对应关系

    7.1 -> 2003 8.0 -> 2005 9.0 -> 2008 10.0 -> 2010 11.0 -> 2012 12.0 -> 2013 14.0 -& ...

  3. [88221008]调用新下单接口失败,result:162020004,resInfo

    [88221008]调用新下单接口失败,result:162020004,resInfo

  4. [AngularJS] AngularJS 1.3 $scope.$watchGroup

    $watchGroup can monitor an array or expression. We watch both email and password by using the same c ...

  5. ! Undefined control sequence. \CJK@XXX ...endcsname {`#2}{`#3}\CJK@ignorespaces \fi l.43 \end{document}

    错误的原因是:你的文本内容超过了一页,需要增加新的一页. 解决问题的方法就是在\end{CJK}或者\end{CJK*}之前加入\newpage,\clearpage或者\cleardoublepag ...

  6. One or more files are in a conflicted state

    http://blog.csdn.net/caiwenfeng_for_23/article/details/37501249 解决代码冲突 如果commit时出现“You have to updat ...

  7. TP框架中如何使用SESSION限制登录?

    TP框架中如何使用SESSION限制登录? 之前总是被问题今天才明白,最高效的来做页面访问限制问题. OOP思想中的继承特性,实现验证,是否已经登录,不必每个页面都进行判断. 实现如下: 继承Cont ...

  8. proxy [ˈprɒksi] 代理

    谷歌.QQ支持,360.搜狗不支持 使用proxy代理可以实现,对原先的类不进行处理,新建一个类,对此进行拦截处理,以实现低耦合 可以通过代理拦截的方法,将方法进行重写. //------------ ...

  9. 获得客户端详细信息以及每个进程的sql语句

    db性能下降时很多朋友都想监控到是哪个客户端.哪个用户.哪台客户端发起的什么会话sql语句, 但是微软自带的要使用profiler才能实现,但是考虑性能问题,很多人不愿意! 网上有很多脚本能监控到客户 ...

  10. UML学习(二)- 用例图

    UML用例图      用例图主要用来图示化系统的主事件流程,它主要用来描述客户的需求,即用户希望系统具备的完成一定功能的动作,通俗地理解用例就是软件的功能模块,所以是设计系统分析阶段的起点,设计人员 ...