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.b73.tv-时时彩和快三| www.891692.com-彩票分析走势软件| www.557400.com-亏损返利彩票平台| www.9983.top-福彩3d爆点图| www.907081.com-福利彩刷流水是什么| 七星彩票www.11qxc.com| 聚彩网www.290282.com| www.621560.com-彩票概念股龙头一览| www.958848.com-贵州福利彩票网站| www.008883.com-广西快三一天多少期| www.312313.com-快频彩票是什么| www.60975.com-河北体彩申请| www.07se.com-浙江体彩中奖规则| www.uk39.com-好彩客是合法的吗| www.588036.com-网络彩票追回案例| www.694905.com-最大的网络彩票平台| www.783821.com-新加坡福利彩票网站| 网易彩票www.506971.com| www.195458.com-河北快三预测推荐表| www.561757.com-双色球彩票下| www.659741.com-速赢彩彩种| www.791284.com-梦到中彩票了| www.876722.com-天下彩、免费资料| www.9822.cm-彩票开奖查询三d| www.940335.com-福彩吉林快三登录| 华彩www.71399g.com| www.vu11.com-惠民彩-| www.5185.win-天津市福彩快乐十| www.98821.com-外国彩票截止就开奖| www.776535.com-快乐彩怎么买稳赚| www.685862.com-在线购彩app官方| www.805937.com-体育彩票电脑版| www.944767.com-福彩全部图标| 500彩票www.26299f.com| www.241711.com-海南七星彩4位玩法| www.445572.com-山西3d彩民乐树图| www.769527.com-七彩虹显卡怎么样| www.09800.com-福彩3d彩霸一休| www.106759.com-瑞彩祥云客户端| www.223036.com-贵州体育彩票查询| www.613281.com-988负盈利彩票网| www.973098.com-七彩玫瑰永生花| www.at88.cc-福彩快3今天开奖号| www.tw83.com-购彩大厅大发| www.01nr.com-彩虹现场版羽泉| www.80qf.com-澳客500网彩票| www.2007.cm-凯发彩票下载| www.892978.com-快三三不同号通选| www.982098.com-彩彩app下载| www.52vf.com-竞彩凯利方差指数| www.8099.xyz-福彩快频彩安全吗| www.197114.com-马来西亚彩票大全| www.089066.com-重庆福彩官方网| www.167591.com-福彩快3开奖结果| www.247955.com-体彩和福彩哪个更假| www.9036.loan-聚鑫乐彩啥东西| www.0551.pro-乐彩老道算三d| www.121164.com-彩票开奖历史| www.416422.com-黄鹤楼大彩20元| www.72368.com-江苏快三和值遗漏表| www.047580.com-乐彩论坛软件| www.158414.com-北单投注彩票| www.583167.com-百位杀号彩经网| www.012.cm-亿彩国际-| www.7at.com-宁波年会彩票| www.40yb.com-结婚彩礼钱相关法律| www.27fi.com-御彩轩安卓-| www.18vt.com-七乐彩31日号码| www.170332.com-彩票360官方版| www.032512.com-福彩网注册总代| www.612956.com-老9乐购彩票平台| www.4109.xyz-内蒙福彩3d字谜| www.863837.com-中彩票开奖大厅| www.934880.com-广西快三精准计划| www.989849.com-彩民乐和阳光探码图| www.eb56.com-彩票平台微信代理| www.xn42.com-江苏快三技巧教学| www.61011.com-保定望都彩票中奖| www.137662.com-毕节买彩票中奖| www.198566.com-上海快三软件下载| www.i09.org-来自旺彩社区| www.616406.com-彩七七官网下载安装| www.732049.com-3d彩报图片-| www.874179.com-彩票app无法提现| www.981634.com-中国体彩报下载安装| www.cx65.com-彩神llapp下载| www.c71.cn-体育彩什么时候开奖| www.34uj.com-千禧彩神通关注码| www.0515.love-体彩竞猜游戏规则| www.1038.cm-爱彩乐安卓-| www.qc37.com-幸运快三怎么投注| www.206757.com-分分彩平台-| www.jh59.com-国乐彩手机app| www.9093.biz-彩票大奖弃奖| www.607181.com-直播彩播是什么| www.715572.com-新福利彩票总汇| www.9029.com-七星彩第43开| www.654703.com-彩家园计划聊天室| www.825038.com-全民汇彩票网页版| www.118700.com-福利彩票买号规则| www.372400.com-65彩票下载-| www.588418.com-爱彩乐开奖结果上海| www.48700.com-87升级版云彩店| www.331194.com-彩票趋势图怎么判断| www.444576.com-福彩3d高手杀两码| www.454798.com-世界杯博彩在哪里买| www.554815.com-彩票偏态分布| www.621109.com-众赢彩票正规吗| www.234026.com-注册送彩金彩票| www.399669.com-金七乐_四川体彩网| www.526131.com-世界杯怎么竞彩| www.585.red-银彩娱乐-| www.8879.loan-足彩基础知识| www.498890.com-福彩足球玩法| www.612693.com-贵州省福彩站点查询| www.441.cm-赢彩彩票天天送钱| www.27167.com-彩票2元网靠谱吗| www.418155.com-中博彩票正规| www.327517.com-彩票图3d-| www.30ml.com-艾鹏色彩头像视频| www.318264.com-49cc彩票香港| www.439156.com-360官方彩票| www.66lt.com-拉菲时时彩娱乐| www.5995.top-足彩19045终极| www.797771.com-彩票源码免费下载| www.974258.com-澳门彩票平台| www.576535.com-下载02彩票-| www.6324.cm-大发快三就计算公式| www.688665.cc-105彩票可靠吗| www.693839.com-福利彩票宣传语征集| www.591502.com-葡京彩票重庆时时彩| www.547559.com-博彩套路-| www.272875.com-福彩在线是正规的吗| www.571545.com-湖北快三实战规律| www.666760.com-乐彩彩票计划| www.878799.com-澳门一分彩开奖结果| www.08js.com-彩铅画动物毛发教程| www.164133.com-竞彩篮球nba推荐| www.36nb.com-苏全文七星彩预测| www.153637.com-江苏快三可以玩吗| www.496805.com-3d彩票缩水工具| www.20295.com-网易足球彩票首页| www.678399.cc-台北快三开官方网| www.282417.com-铁公鸡彩票奖表| www.541733.com-彩3app-| www.789136.com-彩票外围软件| www.5222.tv-派彩电子-| www.9011.loan-乐彩彩票平台代理| www.188688.cc-霸气的彩票宣传语| www.230074.com-北京快三车站| www.316501.com-荣誉彩票是干嘛的| www.381963.com-点击精彩进入| www.560255.com-河北快三派彩走势图| www.436876.com-荣一彩票-| www.5849.xyz-吉林省体彩管理中心| www.39lf.com-七星彩前500| www.705395.com-竞彩全能王-| www.828025.com-春天彩票是合法的吗| www.903890.com-福彩定胆的玩法| www.960461.com-金牌98c彩票| 盛彩网www.41518d.com| www.4414.vip-别赌彩怎么玩都输| www.448056.com-七月星彩结果奖结果| www.549899.com-苏州体彩网点|