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天

知道了
亚洲28 www.567987.cc-大鹏金牌乐彩| www.5194.cn-三d新彩吧-| www.609217.com-今晚赛马派彩与结果| 凤凰彩票www.66652b.com| www.98xl.com-彩吧学堂春利杀码| www.9096.org-重庆老时彩开奖记录| www.075011.com-上海市福利彩票站| www.77917.cc-幸运彩票网站| www.212952.com-3d彩票中奖号| www.ji17.com-发彩网有人用过吗| www.47nr.com-22cc彩票-| www.5281.com-彩票入款优惠10| www.70331.com-哪个玩彩平台安全| www.655609.com-体彩新浪彩票网首页| www.193273.com-湖北快三开奖今天| www.cp502.cc-湖北快三官网| www.471762.com-台湾五分彩开奖软件| www.077072.com-俄罗斯彩票开奖结果| www.442220.com-五洲彩票是真的吗| www.607735.com-美高梅快三-| www.723173.com-吉祥彩票充值安全吗| 500彩票www.50080j.com| www.7189.xyz-七彩印象香烟价格| www.627098.com-乐都彩票官方网站| www.503188.com-快三春节开奖吗| www.7779.date-珐琅彩-| www.82718.com-彩票开奖现场直播| www.062580.com-彩神iv提现-| www.159559.com-11选五北京爱彩乐| www.236353.com-足球彩票中奖规则| www.111701.com-快三如何避免长龙| www.4747.cm-彩票中了一个亿| www.15704.com-一定牛快三预测| www.110895.com-彩票年后几号开售| www.442349.com-银彩77ycnet| www.562170.com-最牛的彩票预算大师| www.39008.com-凤凰乐彩下载| www.7327.loan-彩虹一5无人机| www.xg61.com-皇都彩票一分快3| www.926685.com-达人彩票邀请码| www.585062.com-好彩酒楼江北店| www.714102.com-彩票购买大奖网| www.874833.com-拉菲彩票下载| 博乐彩票www.35918q.com| www.vv01.com-中彩票的技巧| www.473384.com-极速快三大小技巧| www.623531.com-胜负彩软件-| www.765002.com-七星彩加急版下载| www.918120.com-900彩票安全吗| www.jm0.cc-上海快三是什么彩票| www.19ej.com-点击精彩内容色在线| www.674.tv-重庆福彩店-| www.30qe.com-分分彩在哪里开奖| www.ox67.com-快购彩票5-| www.395001.com-彩虹岛2腾讯手游宝| www.583434.com-梦到彩色的鸟| www.700277.com-辽宁省体育彩票中心| www.839729.com-今日新鲜事福彩开奖| www.961120.com-分分彩推测-| www.dl10.com-118彩票软件| www.01qc.com-彩虹颜色的排列顺序| www.883.website水溶彩铅画星空教程| www.097091.com-体彩中奖助手下载| www.712628.com-赛车3-gcp彩票| www.129393.com-昨日福彩开奖| www.233523.com-精彩时分走势图| www.443227.com-双色球维彩视频宝典| www.424441.com-乐赢彩官方下载| www.134705.com-江苏体彩开奖结果| www.35934.com-九彩票平台下载| www.fv37.com-西安福彩宝马案| www.18ci.com-pc蛋蛋彩票网| www.599032.com-腾讯五分彩人工计划| www.h28.net-七星彩领奖时间限制| www.487.me-福彩大奖-| www.02955.com-彩网上怎么买| www.76891.com-海南飞鱼彩票介绍| www.205022.com-江西多乐彩彩乐乐| www.15mo.com-安装万豪彩票| www.312044.com-33彩票网站-| www.750709.com-卓易彩票怎么没了| www.855113.com-分分28彩票合法吗| www.905111.cc-苏州快3彩票| www.972439.com-彩铅画简单入门| www.144210.com-北京足彩返还率多少| 彩天下www.c5127.com| www.13738.cc-老重时时彩走势图片| www.655659.com-开发彩票分析软件| www.693798.com-彩票中奖哪里兑奖| 易彩网www.99638.com| www.101829.com-快三彩票计划可靠吗| www.238738.com-中国体彩竞彩网官网| www.66897.cc-彩票截图能兑奖吗| www.277266.com-马来西亚南洋彩网站| www.120339.com-五分彩官网app| www.874226.com-php彩票源码| www.167087.com-快三算法-| www.792681.com-重庆体彩在哪里兑奖| www.932302.com-亚博国际彩票| www.ac24.com-彩票36开奖结果| www.6006.tv-竞彩二串一稳| www.vn51.cc-福彩幸运快三软件| www.879156.com-彩乐汇盈利1分快3| www.vu82.com-河北快三作弊辅助| www.56027.com-快三回血的有吗| www.073960.com-旭彩网可靠吗| www.187917.com-彩票一般几位数| www.513619.com-时时彩二星做号缩水| www.606326.com-足彩爆冷怎么预测| www.678145.com-七乐彩属于什么彩票| www.735956.com-新浪彩票_首页| www.690931.com-福彩排列七几点开奖| www.812782.com-上海福彩王-| www.058863.com-竞彩网下载-| www.005160.com-933彩票官方下载| www.120024.com-广西快三群里赌博| www.197918.com-四川快三开奖结果| www.268880.com-长城彩票如何挣钱| www.664616.com-幸运七星彩头尾| www.766884.com-青蛙彩票的资料大全| www.413567.com-足彩培训师考试| www.520659.com-澳洲3分彩官方网站| www.584498.cc-下载时时中彩票| www.650747.com-水彩女孩教程| www.703891.com-彩下胆码-| www.773300.com-棋牌送彩金多的网站| www.840393.com-彩票销售额-| www.891816.com-九彩凤凰简笔画| www.967133.com-网络彩票计划员| 七星彩票www.091865.com| www.847105.com-大乐透贴吧体彩吧| www.907585.com-体彩即时彩几点结束| www.967339.com-彩票一对一带微信| 幸运彩票www.73166h.com| www.233087.com-北京快彩开奖| www.6012.biz-探探彩票-| www.796631.com-l竞彩-| www.378405.com-今日彩票开始了吗| www.282619.com-极速快三走势| www.57488.cc-购彩票app下载| www.92659.com-竞彩球队数字编号| www.3214.biz-彩879彩票app| www.106846.com-瑞彩彩票官方网站| 大赢家彩票平台www.701651.com| www.lm62.com-中彩娱乐6-| www.209277.com-共赢彩票网官方网站| www.100035.com-九州彩票平台软件| www.yn64.com-潮信彩票计划群| www.909548.com-今天福彩三d布衣图| www.977695.com-世界杯竞彩彩票| www.ab74.com-体彩群英会-| www.tb53.com-快三和值对照表| www.712566.com-玩快三输了如何回血| www.931.in-体彩排列五开直播| www.705785.com-发彩网app正规吗| www.766006.com-彩之源平台下载| www.802566.com-15彩票-| www.873085.com-福彩旗下-| www.cp151.com-黑彩票平台快三| www.540981.com-79彩票-| www.593383.com-3g门户彩票网站| www.665144.com-7乐彩历史开奖结果| www.722548.com-599彩票官网上| www.762992.com-如何买时时彩|