QQ客服
当前位置 : 首页 > 代码 > html5 css3 > html5实例 > html5全屏3D旋转图片幻灯片

html5全屏3D旋转图片幻灯片

这是一款jQuery响应式全屏3D旋转图片切换。该特效使用GSAP的TweenMax库和TimelineMax库来制作,实现图片的3D缩放和立方体旋转幻灯片切换效果。
分享到微信朋友圈
X

使用方法:

1、head引入css文件

<link rel="stylesheet" type="text/css" href="assets/css/demo.css" />

2、head引入js文件

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>

3、body引入HTML代码

<!-- coidea:loader START -->
<div class="loader">
  <div class="lds-ripple">
	<div></div>
	<div></div>
  </div>
</div>
<!-- coidea:loader END -->


<!-- coidea:slideshow:navigation START -->
<nav id="nav">
  <button id="prev" class="nav-item" data-increment="-1">
	<img src="assets/img/icon-prev.png" alt="prev" />      </button>
  <button id="next" class="nav-item" data-increment="1">
	<img src="assets/img/icon-next.png" alt="next" />      </button>
</nav>
<!-- coidea:slideshow:navigation END -->

<!-- coidea:slideshow START -->
<section class="coidea-3d-carousel">
  <div class="stage">
	
	<!-- coidea:slideshow:item START -->
	<div class="item">
	  <div class="bcg" style="background-image: url(assets/img/img-1.jpeg);"></div>
	  <div class="content">
		<div class="description">
		  <p class="description-target">1483 - 1843</p>
		</div>
		<div class="headline">
		  <h2 class="headline-target">Dream big</h2>
		</div>
		<div class="discover-more">
		  <a href="#" class="discover-more-target">Discover More</a>            </div>
	  </div>
	</div>
	<!-- coidea:slideshow:item END -->

	<!-- coidea:slideshow:item START -->
	<div class="item">
	  <div class="bcg" style="background-image: url(assets/img/img-2.jpeg);"></div>
	  <div class="content">
		<div class="description">
		  <p class="description-target">1723 - 1798</p>
		</div>
		<div class="headline">
		  <h2 class="headline-target">Pray bigger</h2>
		</div>
		<div class="discover-more">
		  <a href="#" class="discover-more-target">Discover More</a>            </div>
	  </div>
	</div>
	<!-- coidea:slideshow:item END -->

	<!-- coidea:slideshow:item START -->
	<div class="item">
	  <div class="bcg" style="background-image: url(assets/img/img-3.jpeg);"></div>
	  <div class="content">
		<div class="description">
		  <p class="description-target">1845 - 1853</p>
		</div>
		<div class="headline">
		  <h2 class="headline-target">Keep going</h2>
		</div>
		<div class="discover-more">
		  <a href="#" class="discover-more-target">Discover More</a>            </div>
	  </div>
	</div>
	<!-- coidea:slideshow:item END -->

  </div>
</section>
<!-- coidea:slideshow END -->

<script src="assets/js/TweenMax.min.js"></script>
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/demo.js"></script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
106官网彩票平台 www.906072.com-中国福彩如何中奖| www.791112.com-福利彩票在线机选号| www.934402.com-美女套路玩彩票| www.cp5888.cc-2019互联网彩票| www.me72.com-糖果彩是正规彩票吗| www.4912.cm-什么app能买竞彩| www.635058.com-体彩飞鱼游戏技巧| www.780822.com-谁有黑客彩票软件买| www.935595.com-彩票聊天室红包派送| www.22092.com-100块的彩票| www.45047.com-盛大彩票555| www.95958.com-竞彩双选盈利| www.095306.com-湖南彩票动物总动员| www.1378.vip-360能买彩票吗| www.cp9608.com-app中彩彩票下载| www.vm22.com-福彩怎么买-| www.vc01.com-博众快三软件| www.389355.cc-如何开一个彩票店| www.77574.com-可靠彩票投注网站| www.633207.com-属马人今日彩票运| www.788253.com-七乐彩走势图2元网| www.921636.com-齐鲁风釆彩票| www.dc15.com-乐赢彩票-| www.23va.com-彩票266-| www.286308.com-今日体彩开奖号码| www.452228.com-太原彩票店-| www.636092.com-彩虹四无人机价格| www.802717.com-福彩开奖解果| www.987765.com-乐米彩票下载安装| www.n75.org-怎样查福彩中奖号码| www.kr82.com-新浪足彩胜负彩分析| www.350876.com-欢乐快三是真的吗| www.507388.com-时时彩和值单双大小| www.344548.cc-时时彩终极平刷技巧| www.kq36.com-五分快三是什么| www.381009.com-今天开奖彩票号码| www.hg07.com-百胜快三预测| www.84bm.com-福建体育彩票领奖| www.264513.com-彩票众众-| www.wf37.com-新彩吧网-| www.8559.cn-彩运8用户注册| www.78568.com-新家坡天天彩资讯网| www.151594.com-彩乐汇-| www.665908.com-彩票直播app下载| www.967729.com-迪拜28是福彩么| www.58jz.cc-软件法拉利彩票平台| www.2228.net-买彩票的搞笑说说| www.551219.com-新浪彩票购彩大厅| www.173253.com-江苏快三平台投注| www.665908.com-彩票直播app下载| www.776498.com-腾讯时时彩规律口诀| www.920965.com-彩神争霸v下载| 幸运彩票www.444083.com| www.dm83.com-全国快三是不是真的| www.953397.com-好彩双爆珠香烟味道| 600彩票www.949498.com| www.ln63.com-旺彩11选5下载| www.380946.com-计划彩下载安装| www.518980.com-山东手机在线彩票| www.626632.com-鑫彩网平台怎么样| www.728940.com-双彩论坛福彩3d| 彩票坊www.022p.cc| www.6576.pw-乐彩网在线选号| www.083960.com-福彩今日福彩开奖| www.156630.com-网上黑彩票怎么赚钱| www.669623.com-海南七星彩投注网仔| www.dj0.com-快三骰子作弊| www.153543.com-重庆时时彩定位软件| www.320321.com-彩经网老旧版走势图| www.yj64.com-c彩38-| www.771972.com-彩票开奖查询25号| www.392418.com-彩票最大奖是多少钱| www.008493.com-澳客彩票手机电脑版| www.08jk.com-体彩试机号关注金码| www.862252.com-k彩彩民福地测速| www.84lf.com-多彩网信得过吗| www.2018.org-彩81彩票苹果版| www.518447.com-福彩3d乐彩网下载| www.180063.com-北京快三投注| www.97234.cc-彩礼8万女方陪嫁| www.g93.org-彩500是真的假的| www.42ed.com-世界杯足彩比分竞猜| www.247995.com-彩票快三群-| www.355783.com-德国彩票所得税| www.558181.com-澳门博彩在线游戏| www.655495.com-彩票网工具下载| www.964813.com-一分时时彩官网计划| www.14qs.com-立彩平台怎么样| www.788942.com-福彩3b开奖历史| www.52402.cc-百盈彩票合法的吗| www.733195.com-广东快彩软件下载| www.885981.com-网购体育彩票app| www.9rq.com-体彩七星彩如何买| www.2454.xyz-手机怎么够买彩票| www.078788.com-国家福彩中心主任| www.114355.com-福彩3d和数值表| www.5225.in-派彩是啥意思| www.9365.biz-怎么区分彩票站真假| www.173703.com-内蒙快三开奖号码| www.974429.com-怎么用app买彩票| www.692757.com-网络推销彩票| www.820074.com-彩礼新政策-| www.380873.com-彩票彩金是什么| www.020980.com-福彩票三d-| www.520026.com-天天中彩票网真实吗| www.796931.com-倍投计算器彩票工具| www.35307.com-我要福利彩票3d的| www.955602.com-乐彩赢0014-| www.2281.xyz-彩吧图迷库-| www.34623.com-福彩3d摇奖机| www.j41.me-皇马彩票网站| www.637026.com-红彩会网页版登陆| www.pj35.cc-彩票快3有什么技巧| 彩民网www.76520q.com| www.731487.com-彩票兼职日赚500| www.263386.com-福彩基诺型-| www.411506.com-彩色纸箱加工厂价格| www.588963.com-hk百彩网开奖资料| www.73781.com-体彩三十一选七开奖| www.ox09.com-福彩3d领袖吧| www.71mn.com-坚持买彩票的语句| www.3894.com-唯彩会竞彩推荐| www.0179.xyz-2月23号体育彩票| www.9117.cm-中大奖彩票站分多少| www.72318.com-体育彩票走式图| www.568909.com-快乐彩奖金是多少| www.273109.com-福彩刮刮卡在哪进货| www.498066.com-神兽竞彩团队公众号| www.602600.com-各地区彩礼排行榜| www.895528.com-新加坡快三开奖查询| 百姓彩票www.bxcp3.com| www.vt14.com-中信彩票能玩吗| www.69wx.com-海南七星彩图规走势| www.6564.me-鑫彩美缝剂价格| www.758354.com-对刷彩票-| www.951429.com-竞彩推荐平台app| www.cai722.cc-快三助手app| www.1587.me-白菜网址送彩金大全| www.168894.com-中国福彩快3广西| www.924766.com-济宁彩票中奖| www.970473.com-广西快三开始时间| 大赢家彩票网www.83033c.com| www.428578.com-正规合法的彩票| www.385816.com-彩票兑奖时间是几点| www.470653.com-竞彩就是赌博| www.802875.com-高频彩漏洞套利| www.862620.com-周五开什么彩票开奖| www.922567.com-竞彩分析师求职| www.967584.com-迪拜彩票在哪里买| www.cp478.com-湖北快三号码推荐| www.152074.com-江苏省体育彩票中心| www.295396.com-彩票三d开奖| www.62dx.com-老品牌明发彩票| www.372068.com-体育彩票几几年有的| www.93387.cc-好玩3d山东福彩| www.pp25.com-彩民彩票app正规| www.309045.com-彩票统计分析器| www.284080.com-彩色表示颜色吗| www.498505.com-凤翔彩票正规吗| www.599222.com-怎样买福利彩票| www.746977.com-豫彩通能买彩票吗| www.833525.com-开奖直播彩票| www.908987.com-彩神3怎么玩| www.984285.com-买2分彩有什么技巧|