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天

知道了
澳门足彩 www.502623.com-自贡市体育彩票网点| www.645042.com-青岛中彩票-| www.803812.com-海南彩票app| www.887350.com-迅盈彩票网-| www.jf47.com-体育彩票怎么兑奖| www.m59.net-体彩实体店返点10| www.53gk.com-今天福利彩票布衣图| www.0824.cm-欧冠体彩投-| www.9590.org-老360彩票-| www.56596.com-福彩20选五-| www.022627.com-彩世界苹果版| www.106012.com-牛蛙彩准四不像| www.185176.com-好彩三奖金-| www.266353.com-河北福利彩票开奖| www.391991.com-竞彩串关-| www.523536.com-福彩快3犯法吗| www.615748.com-代买彩票犯法吗| www.697010.com-江苏体彩网e球彩| www.783634.com-数字彩票解密| www.869479.com-手机买七星彩| www.971284.com-乐彩字谜图论坛| www.er75.com-红彩-| www.yd71.com-韩国彩票中奖规则| www.28hy.com-该彩种暂停销售| www.0438.net-懂球帝买足彩| www.7508.org-怎么发掘竞彩客户| www.29707.com-大爆奖彩票是真的吗| www.77949.cc-体育彩票飞鱼| www.033086.com-彩票866-| www.114118.cc-福彩3d精准跨度| www.189463.com-时时彩投注方法| www.266946.com-今晚上彩票开奖结果| www.434824.com-青蛙彩青蛙彩| www.535625.com-中过大奖的彩票| www.637508.com-彩虹6号干员真实吗| www.733159.com-江苏彩票管理中心| www.813404.com-福彩15选5第一位| www.890377.com-坤彩科技股吧| www.963079.com-排列三下载彩票| 13e彩票www.612210.com| www.kf40.com-购彩者手机在线| www.h97.club-七乐彩开号码走式图| www.44ft.com-彩富人生可信吗| www.808.biz-87足彩官方app| www.5427.xyz-38彩票下载-| www.23515.cc-义乌市福利彩票官网| www.78796.cc-苏州新区竞彩店| www.032099.com-爱彩乐骗局-| www.112847.com-哈尔滨快三走势图| www.187111.cc-新浪时时彩-| www.263044.com-福彩7等奖多少钱| www.495115.com-济南彩票站转让信息| www.570622.com-七彩影院下载| www.649888.com-特彩巴原之高手网| www.753951.com-网络彩票坑死了| www.859947.com-微微彩票是真是假| www.928750.com-牛彩彩票-| www.984691.com-彩运8官方购彩平台| www.yo06.com-qq群买彩票赚钱| www.25tc.com-微信上的彩友是什么| www.535.com-移动和彩云-| www.4564.org-买彩票怎么样买| www.01666.com-彩金是什么游戏| www.70055.cc-河南游泳体彩481| www.029837.com-国民彩票网页版| www.110147.com-彩乐透官方网站| www.180932.com-今日中彩-| www.254004.com-手机彩票哪个软件好| www.326863.com-快三杀号软件手机版| www.406347.com-百福彩票app| www.511851.com-大地娱乐彩票app| www.585880.com-博彩全部网站| www.658565.com-彩视如何设置全屏| www.830998.com-黄鹤楼迷彩-| www.900061.cc-657彩票k-| www.966841.com-广西褔利彩票官网| 500彩票网www.657505.com| www.it72.com-360混合竞彩足球| www.zo61.com-玩时时彩心态| www.29xn.com-福彩3d昨天的奖号| www.0703.org-彩票店申请书| www.7149.vip-七彩音符的故事| www.21499.com-网络彩票app诈骗| www.64707.com-竞彩英甲比赛规律| www.037717.com-爱投彩票安卓版| www.123686.com-福彩61开奖规则| www.196020.com-百宝彩票走势图| www.266911.com-中发福彩-| www.368238.com-海上日落彩铅画简单| www.457101.com-中彩缘试机号| www.545178.com-计算彩票神人| www.648110.com-新浪网数字彩票频道| www.721936.com-中国福彩网官网首页| www.793812.com-斯诺克博彩网站| www.868605.com-七星彩合直走势| www.969988.com-双彩网网址导航| www.cj6.cc-时时彩1分快3网站| www.ns81.com-福彩3d输几十万| www.3ba.cc-彩票中奖还负债| www.55cr.com-彩票好不好-| www.889.cm-玩时时彩犯法么| www.4794.vip-腾讯代理彩虹六号| www.9865.org-报聘彩票销售人员| www.75119.com-万万亿彩票-| www.023602.com-福利彩票开奖期| www.098859.com-电脑彩正版藏宝图| www.160955.com-七星彩彩版高速下载| www.279315.com-福彩三d中心开机号| www.362057.com-爱乐透彩票app| www.444051.com-零三八彩票-| www.553322.com-足彩串子几串最划算| www.616637.com-体彩二串一规则| www.681164.com-彩票榜手机app| www.752637.com-乐彩赢抢红包| www.883171.com-彩友多合法吗| www.960635.com-最新彩票诈骗案例| 杏彩www.00840r.com| www.dm40.com-买彩票念十八字咒语| www.tn02.com-彩报第四版-| www.6ra.com-开奖彩票结果查询| www.57vh.com-美国大学彩票| www.877.cm-彩铅方法-| www.4471.cn-彩票猜谜-| www.9373.org-福利彩票现主任是谁| www.023552.com-香港彩库宝典图库| www.088788.cc-彩神大发快三邀请码| www.145558.com-竞彩310比分直播| www.249368.com-手机11选5彩网| www.313410.com-华夏彩票客户端下载| www.376543.cc-网上怎样购买彩票| www.511338.com-有关彩虹的名字| www.575976.com-体彩中心停机处理| www.637692.com-彩票发展趋势| www.737759.com-幸运彩票网会员注册| www.805738.com-彩98下载-| www.871753.com-利彩工具手机版| www.955491.com-99彩票手机版下载| www.994190.com-时时彩手机做号工具| www.cp3211.com-快三开奖一定牛| www.jr86.com-澳洲时时彩人工计划| www.yr88.cc-延吉市招聘彩票| www.14ou.com-网络购彩恢复了嘛| www.328.cm-银海彩票彩吧图库| www.3133.net-体育彩票排列5一| www.8016.vip-亲子游戏彩虹伞| www.21976.cc-旧版50o万彩票网| www.58855.com-中彩易软件哪里下载| www.044446.com-福彩试机号今天号| www.121153.com-迪拜28是福彩么| www.182856.com-亚洲彩票可以赚钱吗| www.243331.com-福利彩票往期开奖| www.308203.com-新手怎么玩彩票| www.366057.com-福彩每天开奖多少号| www.444996.com-吕梁福利彩票中心| www.525362.com-重庆时时彩官方停开| www.661602.com-足彩八串一规则| www.737349.com-紫薇福彩胆码| www.798853.com-88彩票网手机登录| www.864182.com-天下彩免费123| www.916508.com-致富彩票网-| www.968992.com-分分彩彩票网| www.fb93.com-01彩票破解器| www.tm84.com-安徽快三破解| www.3nf.com-彩铅笔手绘楼|