jQuery+html5实现的3D动态切换焦点轮播幻灯片
今天爱编程给网友们分享一款基于jQuery+html5实现的3D动态切换焦点轮播幻灯片,支持左右箭头和圆点按钮播放控制,支持多种不同的3D动态切换特效,自适应全屏显示,兼容360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗,不支持IE8及以下浏览器。横向全屏显示,效果图如下:

实现的代码。
该幻灯片基于jquery,所以要引用jquery库,另个还有两个js库分别是html5zoo.js和lovelygallery.js。这些js在实例下载里都有。
html代码部分:
<div class="pics_wrap">
<div id="html5zoo-1">
<ul class="html5zoo-slides" style="display: none;">
<li><a href="http://www.w2bc.com/">
<img src="data:images/001.jpg" /></a></li>
<li><a href="http://www.w2bc.com/">
<img src="data:images/002.jpg" /></a></li>
<li><a href="http://www.w2bc.com/">
<img src="data:images/003.jpg" /></a></li>
<li><a href="http://www.w2bc.com/">
<img src="data:images/004.jpg" /></a></li>
<li><a href="http://www.w2bc.com/">
<img src="data:images/005.jpg" /></a></li>
</ul>
</div>
</div>
via:http://www.w2bc.com/Article/14230
jQuery+html5实现的3D动态切换焦点轮播幻灯片的更多相关文章
- jQuery仿京东首页广告图片切换图片轮播
1.效果图如下: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
- JavaScript焦点轮播图
在慕课学习了JavaScript焦点轮播图特效,在此做一个整理. 首先是html结构,我用的是本地同文件夹下的三张图片,多出来的第一张(pic3副本)和最后一张图片(pic1副本)是为了实现无缝切换效 ...
- jQuery编写的一款兼容IE6的图片轮播幻灯片
jQuery编写的一款兼容IE6的图片轮播幻灯片,很不错的一款jquery特效.大家可以下载下来研究研究. 每隔几秒就自动切换一波图片,此效果兼容性还做的不错,适合居多的浏览器. 适用浏览器:IE6. ...
- js焦点轮播图
汇集网上焦点轮播图的实现方式,自己试了下,不过鼠标悬浮停止动画和鼠标离开动画播放好像没生效,不太明白,最后两行代码中,为什么可以直接写stop和play.不用加括号调用函数么?求懂的大神指点! 所用知 ...
- 多预览小图焦点轮播插件lrtk
多预览小图焦点轮播插件lrtk // JavaScript Document $(document).ready(function(){ //$('#select_btn li:first').css ...
- Android高级图片滚动控件,编写3D版的图片轮播器
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/17482089 大家好,好久不见了,最近由于工作特别繁忙,已经有一个多月的时间没写博 ...
- 纯CSS焦点轮播效果-功能可扩展
个人博客: http://mcchen.club 纯CSS3实现模拟焦点轮播效果,支持JQ等扩展各项功能.废话少说,直接贴代码. <!DOCTYPE html> <html> ...
- JS---案例---左右焦点轮播图(tb)
案例---左右焦点轮播图(tb) <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
随机推荐
- TensorFlowIO操作(三)------图像操作
图像操作 图像基本概念 在图像数字化表示当中,分为黑白和彩色两种.在数字化表示图片的时候,有三个因素.分别是图片的长.图片的宽.图片的颜色通道数.那么黑白图片的颜色通道数为1,它只需要一个数字就可以表 ...
- C#装饰者模式实例代码
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace 装饰者 ...
- Virtualbox中Linux添加新磁盘并创建分区
原文:https://www.linuxidc.com/Linux/2017-01/139616.htm ----------------------------------------------- ...
- 免费资源:Bootstrap开发的创意模板
在线演示 免费下载 一套免费的Bootstrap网站模板,使用现代的布局并支持响应式.拥有非常棒的CSS3动画效果及其滚动效果.
- 本周推荐7款CSS3实现的动态特效
大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和 ...
- STL - Predicate - Binary Predicate(双参判断式)
Binary Predicate(双参判断式)的用途是:比较两个参数的特定属性 我们先建一个领域模型类: Person.h #ifndef _Domain_Models_Person_H_ #defi ...
- 说说PHP中的命名空间相关概念
说说PHP中的命名空间相关概念 1. PHP中的命名空间是什么? 什么是命名空间?"从广义上来说,命名空间是一种封装事物的方法.在非常多地方都能够见到这样的抽象概念. 比如.在操作系统中文件 ...
- hunnu11546:Sum of f(x)
Problem description 令f(x)为x的全部约数之和,x的约数即能够被x整除的数.如f(24)=1+2+3+4+6+8+12+24=60),求 f(l) + f(l + 1) + ...
- CallableStatement简单使用
直接上存储过程.函数 --运行不带參数但带返回值的存储过程 CREATE OR REPLACE PROCEDURE proc_getUserCount(v_totalCount OUT NUMBER) ...
- AFNetworking2.0源代码解析
写在前面给大家推荐一个不错的站点 点击打开链接 本文測试样例源代码下载地址 近期看AFNetworking2的源代码.学习这个知名网络框架的实现.顺便梳理写下文章. AFNetworking的代码还在 ...