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.374338.com-体彩十一运夺金走图| www.480022.com-微信买竞彩-| www.081921.com-彩票倍投盈亏计算器| www.274889.cc-快三开奖贵州快三| www.sl35.com-重庆福彩-| www.067585.com-彩票投注单打印系统| www.1133.cn-竞彩足球腰斩怎么算| www.234157.com-染上彩票怎么戒呀| www.cai27.com-江西快三走势图| www.8475.xyz-亿彩彩票公平吗| www.458007.com-240彩票-| www.22997.cc-王者彩票开奖| www.064902.com-重庆彩票娱乐平台| www.204599.com-多乐彩票骗局| www.763978.com-看彩票下什么软件| www.912621.com-好彩客骗局-| 大赢家彩票平台www.763236.com| www.395098.com-彩票员-| www.73781.com-体彩三十一选七开奖| www.109145.com-盈盈彩注册-| www.283539.com-七星彩兑奖方式| www.464318.com-风飞扬七星彩预测| www.682992.com-分分彩玩法技巧大全| www.863317.com-福彩在线-| www.974287.com-520彩票网下载| www.re45.com-彩19app-| www.80xw.com-天天时时彩手机版3| www.8556.biz-怎样研究七星彩规律| www.109584.com-派彩洗面奶-| www.239816.com-王者彩票安全吗| www.bm89.com-帮人代玩彩票是套路| www.67mf.com-分分彩最稳打法| www.6816.com-彩票三地图迷| www.1109.vip-网彩计划员-| www.576557.com-福彩试机开奖号| www.046883.com-安卓彩票平台下载| www.100300.com-福彩3d杀又飞| www.612123.com-狗万网址足彩吧| www.hl84.com-湖北快三走势图连线| www.cp6000.cc-中国体育彩票竞彩网| www.42427.cc-中彩网十分快三| www.074389.com-3d开门彩-| www.8735.com-台湾六福彩总站直播| www.58312.cc-5亿彩票网会被骗吗| www.014922.com-七星彩分析口诀| www.106976.com-快彩助手11选5| www.180904.com-旺彩软件大全| www.978707.com-天天福彩双色球| www.19712.com-极速时时彩是否有假| www.736915.com-福彩上海天天选四| www.937768.com-七星彩复式8个号码| www.fw25.com-5亿彩票app-| www.1220.tv-汇辰彩票下载| www.2008.cm-彩虹6号加速器北美| www.9224.cc-航天彩虹同花顺| www.827466.com-福彩骗局佳缘| www.7766.org-彩坛至尊论坛| www.96662.cc-鼎吉彩票合法吗| www.197079.com-马来西亚当地彩票| www.59781.com-彩虹宝宝2-| www.781373.com-真人百乐彩-| www.851310.com-买彩网8721-| www.907886.com-合肥有多少个彩票点| www.3819.bid-怎样买竞彩足球稳赚| www.449893.com-幽默彩票图片| www.567314.com-江苏福彩七乐彩规则| www.655330.com-福彩快乐12诀窍| www.728979.com-双彩3d图谜区| www.800486.com-不懂彩票怎么买| www.873511.com-足彩篮彩计划| www.945156.com-分分彩破解软件| www.993505.com-体彩足球6串22| www.cn53.com-彩神软件安卓版| www.603630.com-福彩快三3保本技巧| www.289.win-中奖彩票纠纷| www.431083.com-黄河风彩双色球开奖| www.721377.com-立即开奖彩票破解| www.jv24.com-彩铅调色表-| www.088299.com-足彩北单比分直播| www.297006.com-彩票k线图-| www.176719.com-江苏快三中奖多少钱| www.296411.com-体育彩票往期开奖| www.358373.com-重庆时时彩数字规律| www.20pr.com-福彩一定牛-| www.5278.site-今天赛马派彩和结果| www.887847.com-106彩票下载安装| www.21es.com-足球彩票中奖结果| www.2331.win-彩世界时时宝典| 亿彩www.6832t.com| www.ho74.com-好彩客app1.0| www.yk02.com-一分钟快三怎么倍投| www.642881.com-彩票中头奖怎么办| www.751925.com-什么叫亚洲彩| www.30ma.com-极速分分彩开奖结果| www.2571.pw-779彩票安卓下载| www.3136.win-七星彩解码大全查询| www.819.cn-彩宝贝彩票专家原创| www.8081.biz-北京速开彩官网| www.29491.com-广东福利彩app| www.18eg.com-11选5彩票江苏| www.397.red-u58发发彩下载| www.4501.cc-深圳侯彩彩票安全吗| www.026924.com-彩票01有没有问题| www.15315.cc-彩虹形成的物理原理| www.72334.com-福彩3d怎么算| www.389889.com-福利彩票所有特等奖| www.022814.com-中国购彩网官网| www.651010.com-简单创意水彩| www.552890.com-彩名堂一样的软件| www.661737.com-竞彩比分全包| www.167518.com-江苏快三走势图表| www.975109.com-今晚福彩-| www.is2.cc-快三网站平台官网娱| www.486488.com-蓝彩分析-| www.582150.com-采彩票结果-| www.766154.com-大发快三是不是真的| www.848778.com-彩票微信-| www.933591.com-乐彩彩票网安全吗| www.987541.com-黑龙江福彩20分| www.hr04.com-好彩客下载-| www.27em.com-熊猫彩票手机| www.12214.com-移动话费购彩| www.192228.com-甘肃快三专家推荐| www.037452.com-彩票行家com香港| www.490562.com-教人买彩票-| www.670311.com-彩票网站靠谱吗| www.766803.com-彩8彩票25tt| www.857365.com-盈彩计划网-| www.969476.com-欢乐彩正规吗| www.64sc.com-足彩高手qq群平台| www.121357.com-买彩票导师-| www.502295.com-kk彩票是真的吗| www.133718.com-极速快三彩票系统| www.203045.com-江苏快三代理| www.261857.com-香港版彩票论坛| www.332492.com-大奖彩票黑平台举报| www.723745.com-湖北省彩票发行时间| www.26836.cc-七星彩是否有规律| www.858259.com-足彩大赢家网站| www.928171.com-彩店宝店主版| www.971480.com-福彩手机报下载| 好彩www.60123f.com| www.26455.com-七星彩高频技巧| www.33956.cc-体育彩票分析师| www.262207.com-60彩票app下载| www.934448.com-快三怎么刷流水| www.168381.com-湖北快三今天结果| www.314128.com-中彩网北海3d预测| www.424755.com-幸运十分彩走势| www.529230.com-彩宝贝彩票专家原创| www.611290.com-吉祥彩票平台真的吗| www.692655.com-湖北快三彩票走势图| www.134648.com-旋子彩画教程| www.552555.com-c27彩票官网| www.912001.com-唐人街彩票平台| www.288075.com-快8彩网app下载| www.391226.com-幸运5星彩app| www.508535.com-最靠谱的彩票网| www.611617.com-益彩网正规嘛| www.703092.com-爱彩乐12选5| www.771399.com-彩虹6号好玩吗| www.493698.com-网上私彩怎么赚钱的| 大赢家彩票平台www.710230.com| www.686206.com-澳门彩票公司简介|