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.355727.com-体彩亿元大奖排行| www.ei75.com-高频快开彩票| www.008862.com-彩票接口调用| www.088059.com-双赢彩票导师是托| www.162334.com-伪球迷买足彩胜| www.350041.com-玩彩票开两号对压| www.424033.com-乐彩33软件-| www.526712.com-时时彩如何平投追号| www.636291.com-彩虹兔分级阅读| www.727189.com-七乐彩尾数走势图表| www.803520.com-体彩6十l开奖结果| www.880941.com-双色球爱彩人彩票网| www.989162.com-福利彩票机器多少钱| www.cg0.com-好彩一生肖走势图| www.pa37.com-彩票快三一定牛| www.01ag.com-彩虹形成原理图| www.72mw.com-打鱼送彩金可提现| www.1460.vip-用彩铅可以画什么| www.27422.com-宜人财富彩票| www.72514.com-福彩今年38期字谜| www.045567.cc-手机彩票平台大全| www.130756.com-致富彩票计划软件| www.207820.com-49彩票app官网| www.282205.com-时时彩个位杀号宝典| www.388222.com-湘潭华彩置业| www.511177.com-彩虹天堂有什么用| www.583251.com-公益彩票官方网站| www.658661.com-中乐彩官方网| www.766426.com-彩虹糖的内涵意思| www.861331.com-福彩三d预测总汇| www.929622.com-牛彩票是什么意思| www.985770.com-天空彩票与你同行| www.cp6785.com-福彩快三规律破解| www.nj79.com-足彩网-| www.3hf.com-京彩计划软件| www.60fe.com-网易红彩怎么破解| www.0392.net-重生时时彩助手| www.8300.vip-易彩堂合不合法| www.29799.cc-山东经经福彩在线| www.72773.cc-竞彩彩民投注比例| www.054732.com-触手系本子彩色| www.132897.com-足彩圈-| www.206433.com-合肥快三开奖走势图| www.278031.com-上海快3爱彩乐查询| www.380979.com-体彩11选5预测| www.501884.com-福彩领奖时限多久| www.571309.com-开足彩店要什么条件| www.640510.com-环彩-| www.747557.com-爱彩ac99-| www.815326.com-秒开彩-| www.884182.com-乐盈彩票可靠吗| www.983639.com-幸运国际时时彩| www.gs68.cc-大发分分彩计划在线| www.xu42.com-彩票送礼金-| www.15qc.com-彩礼太多分手| www.172.mobi-彩票投注站转让上海| www.3453.top-app97彩票-| www.8814.in-分分彩龙虎对刷| www.52680.com-时时彩四星稳赚方法| www.96371.com-体彩收益分配| www.057796.com-辽宁快三开奖| www.154507.com-如何在高频彩里赚钱| www.240045.com-彩神ix谁玩过| www.313563.com-华夏彩票官网首页| www.380850.com-杨光华足彩-| www.520553.com-彩票托真实经历| www.585251.com-温州体育彩票店| www.654917.com-怎么打彩票容易中奖| www.758200.com-高盛彩票可信度| www.839065.com-彩票太湖詹天佑| www.901817.com-福利彩票游戏机加盟| www.964443.com-福彩幸运飞艇| 500万彩票www.96386c.com| www.fe70.com-吉林快三走势彩票| www.092767.com-信彩娱乐-| www.855058.com-彩吧论坛预测汇总| www.908885.com-极速赛车彩票软件| www.962523.com-哪个福彩app好用| 818合彩www.www.5666hc.com| www.ag07.com-新浪数字彩票排三| www.oe12.com-6329彩票-| www.137451.com-大乐透彩票奖金计算| www.652175.com-福彩快频彩app| www.792770.com-浙江省体育彩票兑奖| www.863744.com-彩85下载-| www.913531.com-好彩客ios下载| www.964267.com-258竞彩首页| 彩客博www.8667z.com| www.cd09.com-彩神v合法吗| www.rw60.com-国家开发彩票软件| www.04fc.com-谜彩天地高清图| www.65ok.com-大连福彩网地址| www.0162.com-意大利色彩岛| www.7757.net-九千万彩票是真的吗| www.22245.cc-中国竞彩网下载安装| www.60176.com-福彩三d校长预测| www.025960.com-快三遗漏数据一定牛| www.092573.com-福建体育彩票下载| www.150310.com-期期中彩票靠谱吗| www.246822.com-新浪足彩分析| www.310296.com-甘肃快三推号软件| www.369988.com-合肥酷彩-| www.451041.com-买彩票下什么软件| www.533996.com-彩票号码怎么看| www.666951.com-乐彩国际平台下载| www.732991.com-第19047期体彩| www.797300.com-八马彩app-| www.855535.com-七乐彩复试中奖表| www.902277.com-彩票自助机能赚钱吗| www.955122.com-500彩票辅助投| www.994121.com-请问天天彩票正规吗| www.cp2606.com-江苏快三中奖多少钱| www.kj38.com-彩票小助手计划软件| www.zq67.com-足彩竞猜计算器| www.17dn.com-彩票答案-| www.301.cc-网上买彩票赔了5万| www.3195.in-安徽快三多久一期| www.8139.wang-彩悦城几点开门| www.22826.cc-安卓手机福彩网| www.60534.com-双色球杀号百度乐彩| www.038739.com-彩票中心大厅下载| www.116912.com-彩票平刷挂机论坛| www.177182.com-官网一分快三| www.237139.com-合肥快三走势图今天| www.300894.com-彩票二等奖容易中么| www.363115.com-体彩藏机图彩吧图库| www.439448.com-福彩营业厅游戏机| www.522487.com-我乐时时彩-| www.581589.com-彩八仙时时彩ios| www.644116.com-彩票兑奖注意事项| www.794642.cc-最新彩民乐阳光探| www.850562.com-360竞彩足球专家| www.894870.com-重庆时时彩投注站| www.947147.com-彩票辅助分析软件| www.986508.com-阿里巴巴福彩是什么| 亚洲www.938906.com| www.ge56.com-福彩快三直营网站| www.ur38.com-陕西体彩快三遗漏| www.6do.com-豪彩官方邀请码| www.48dr.com-星彩和刘禅-| www.437.bid-南京众彩市场电话| www.3174.biz-体彩7星彩中4连号| www.7744.cm-分分彩彩挂机软件| www.17866.cc-足球彩票兑奖时间| www.52601.com-中免蓝好彩-| www.88462.com-梦到中彩票别人来抢| www.031769.com-下彩网彩票时时彩| www.095350.com-怎么推销彩票| www.145833.com-足球竟彩计算器| www.335502.com-买彩网下载-| www.391010.com-福利彩票网购平台| www.509232.com-7星彩机选中奖| www.566971.com-澳洲有哪些彩票开奖| www.620901.com-彩票中奖投注站利润| www.677004.com-万彩pdf-| www.727592.com-体彩现场直播视频| www.783164.com-保定福彩管理中心| www.830529.com-怎样用手机查彩票| www.885264.com-快开彩票漏洞| www.ke92.com-彩票是不是一个骗局| www.xo16.com-奇妙彩票软件| www.01ji.com-彩虹产生的原因| www.52fx.com-彩吧助手手机版| www.176.space-优秀彩铅画作品图片|