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天

知道了
彩票123现在叫什么名字 www.972747.com-正规7k彩票-| www.hb49.com-中国福利快三| www.343090.com-体育彩票每周几开奖| www.120758.com-即时开彩手机软件| www.983173.com-35彩票平台-| www.se27.com-时时彩彩票软件| www.6655.org-老实时彩360| www.620229.com-如何分辨釉下彩| www.751535.com-8k彩票破解器| www.952862.com-足球竞彩310预测| 彩票5www.586840.com| www.pj68.cc-五百万彩票图| www.kp95.com-福利彩票字谜大全| www.18yv.com-亿乐彩是黑平台吗| www.646641.com-足彩14场怎么买| www.164521.com-福彩快三那一年开始| www.267637.com-中国体育彩票玩法| www.602545.com-旺彩票-| www.150211.com-彩票机器全套多少钱| www.xg24.com-香港马会博彩公司| www.839868.com-nba竞彩交流群| www.78kb.com-台湾中正彩开奖号码| www.49136.com-香港彩富网综合资料| www.im10.com-山东省彩票沙龙| www.573201.com-时时彩k线图怎么看| www.305528.com-甘肃快3开奖彩彩| www.68cb.com-彩9网-| www.35875.com-爱彩乐专家推荐| www.225386.com-时时彩计划q群| www.76ba.com-彩天下稳-| www.66692.cc-玩竞彩输的家破人亡| www.104649.cc-竞彩直播比分| www.51152.cc-大发快三准确算法| www.s32.club-太湖字谜乐彩论坛| www.969579.com-酷彩官网-| www.4984.cc-小军网摘版彩吧图库| www.886324.com-盈彩吧app-| www.747208.com-天天爱彩票旧版| www.44fh.cc-彩票的尺寸-| www.72620.com-福彩彩迷天地双色球| www.132041.com-农村订婚彩礼能退不| www.218059.com-网络彩票赌博犯法吗| www.0390.cc-如何购买海外足彩| www.454579.com-乐彩商城怎么提现| www.01jo.com-彩虹产生的条件| www.2885.shop-精彩视频点观看| www.32466.cc-爱彩软件下载| www.di12.com-即开型彩票骗局| www.932.cc-7星彩巨奖-| www.8989.org-分分彩追豹子| www.242447.com-四亿彩票网址| www.f06.cn-七乐彩胆拖投注| www.43qd.com-彩票财神算号| www.579102.com-9万彩票苹果版下载| www.m16.shop-玩彩票输了十几万| www.619210.com-重庆体彩网点查询| www.790372.com-体育彩票模拟选号| www.03129.com-快三计划倍投表| www.41147.com-3d彩票高手-| www.029764.com-彩虹的约定视频| www.190707.com-大发快三有哪些技巧| www.326222.com-彩宝是什么平台| www.62691.cc-极速快三博彩走势图| www.111603.com-霸王彩票-| www.969375.com-酷彩吧中奖怎么领| www.cp664.cc-一分快三官网| www.90487.com-彩老婆3d高手论坛| www.27658.cc-足彩新闻-| www.732300.com-天价彩礼政府怎么管| 金彩www.982jc.com| www.71dj.cc-乐吧时时彩-| www.938696.com-亿彩彩票网站| 13e彩票www.306061.com| www.781874.com-长春市双阳区黑彩| www.579083.com-九彩凤凰-| www.681660.com-买彩票下载哪个软件| www.800314.com-博达彩票-| www.938182.com-福建快三微信群| www.gm78.com-彩票查询官网| www.310163.com-云南省彩票中心位置| www.4667.cn-博雅彩票可信吗| www.33750.com-网络快频彩-| www.773342.com-竞彩稳赢心得| www.984484.com-财神彩票受害者| www.574499.com-时时彩网络诈骗案例| www.766428.com-中国体彩的玩法| www.916302.com-万博彩票代理犯法么| www.qj38.com-顺丰彩票靠谱吗| www.5048.cm-江苏体彩一选五| www.37844.com-c8万彩吧cn买马| www.010206.com-福利彩票加盟多少钱| www.194098.com-红旗彩票快三靠谱吗| www.7652.loan-正彩彩票下载安装| www.122215.com-福彩鲍学全-| www.427095.com-双色球福彩软件下载| www.515381.com-七星彩网购-| www.641969.com-彩票字母含义| www.735292.com-购彩平台下载官网| www.518725.com-旺财彩票社区| www.734518.com-喜鹊彩票历史数据| www.806644.com-3d乐彩-| www.878886.com-两分快三-| www.902203.com-网上打黑彩怎么处罚| www.974800.com-篮球体彩app| www.i41.com-福彩3d宝典图片| www.651942.com-幸运彩票能挣钱吗| www.001747.com-哪一种彩票中奖率高| www.085200.com-红旗彩票是骗人的吗| www.67288.cc-盐城市福彩中心地址| www.508764.com-众彩网童彤-| www.629320.com-福彩七乐彩开奖结杲| www.698622.com-中国6加1彩票玩法| www.786977.com-盛兴彩票v1网址| www.863857.com-七星彩湖北兑奖地点| www.931702.com-买彩票咒语-| www.978969.com-苏式彩绘图案| www.tg00.com-大发快三在线预测| www.10ni.com-彩钢板阳光房顶图片| www.87up.com-澳博彩票免费计划| www.2016.tv-恒发彩票app| www.592953.com-彩虹频道手机破解版| www.703693.com-毒药独胆福彩| www.0893.date-华夏彩票可靠| www.1462.com-初二彩铅画-| www.355026.com-竞彩怎么样不交税| www.136045.com-9968彩票-| www.250186.com-中彩彩票qqz| www.869983.com-彩票k线图安卓| www.930307.com-91彩票-| www.974851.com-特区彩票七星彩论| 500万彩票www.583792.com| www.hg22.com-百胜快三彩票| www.va88.com-彩票软件开发排行榜| www.p80.top-万达彩票网站首页| www.97ji.com-表演前的彩排论文| www.3908.hk-七星彩最近开奖图片| www.762287.com-乐赢彩票是黑彩么| www.853645.com-彩票头条-| www.913738.com-万彩网正规吗| www.996575.com-新天天彩下载| www.dr45.com-快彩11选五助手| www.yr55.com-足彩3场2关-| www.16ur.com-快三和值有哪些技巧| www.049861.com-贵州快三计划软件| www.06348.com-爱投彩票店主犯法吗| www.425299.com-冰淇淋简笔画彩色| www.567201.com-赛车彩票真的假的| www.631253.com-足彩19034分析| www.703061.com-竞彩足球一周对阵| www.765895.com-最经典的58彩票| www.860917.com-体彩在线客户端下载| www.936581.com-彩客彩票307旧版| www.977811.com-福利彩票快餐号| www.cp8638.com-幸福快三是合法的吗| www.400296.cc-辽宁福彩网35选七| www.797908.com-彩票平台制作搭建| www.925669.com-彩富网下载-| www.984878.com-神彩争霸官网| www.aa50.com-快三是不是时时彩| www.265362.com-福彩3d密码表| 天天彩票www.209881.com| www.999017.com-彩乐汇代理-| www.045813.com-彩81彩票官方网站| www.024893.com-澳门快三真实性|