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.520679.com-时时彩任三混选技巧| www.648960.com-七彩辣椒盆栽| www.751282.com-今日彩票28-| www.830793.com-彩票之家免费資料| www.911342.com-新浪竞技体育彩票| www.979164.com-旋子彩画高清图案| www.cp9896.com-中国福彩快三走势图| www.sh71.com-福彩3d彩报第三版| www.154855.com-足彩术语白话| www.722229.com-上彩票-| www.602313.com-彩票冒领能查出来| www.729936.com-二分彩票查询| www.251398.com-九万彩票app| www.226545.com-分分彩漏洞刷钱工具| www.039911.com-9999pp彩票-| www.174883.com-贵州福彩快3走势图| www.42986.com-茶光福彩网点| www.002886.com-天下彩票广西快3| www.095918.com-超级彩票代打兼职| www.171800.com-贵州省体育彩票| www.237108.com-浙江体彩大乐透官网| www.315895.com-辽宁福彩11选5| www.744126.com-网上买彩票当庄家| www.843962.com-彩票双色球34期| www.908757.com-口袋彩票是骗局吗| www.974200.com-福彩快三有几种玩法| www.ci.cc-快三开奖结果甘肃省| www.ng82.com-篮球竞彩比分| www.q78.top-山东体彩网首页| www.44et.com-建盏七彩光加水| www.396.net-炫彩弹射ios| www.098444.com-3d彩票彩图下载| www.5878.vip-如何用彩分兑换彩票| www.866101.com-福利彩票候开奖| www.xs.cc-青海西宁快三走势图| www.00da.com-澳门十分彩玩法| www.8271.cn-彩票为什么没人造假| www.682567.com-怎么买足彩-| www.855308.com-香港快三怎么玩| www.611219.com-七乐彩3拖8多少钱| www.748118.com-福彩3d最新中奖号| www.833526.com-彩票开奖体彩排列三| 500彩票网www.08299.com| www.fl84.com-足彩500比分| www.17.me-大彩鲸网页版| www.575151.com-怎么买欧洲彩票| www.572080.com-大博金彩票q| www.727523.com-山东彩票在线app| www.916700.com-哪个彩票网站返点高| www.xr10.com-快三抓豹子技巧| www.995045.com-彩票五百万-| www.gh47.com-快三属于福利彩票吗| www.42394.com-玩彩票安桌-| www.135512.com-福彩网站下载安装| www.354244.com-买彩票的诀窍| www.123595.com-3d牛彩一字定三码| www.453002.com-七星彩华南地区论坛| www.4969.cc-足彩中奖彩票真图| www.106038.com-体育彩票二维码扫描| www.779747.com-明发娱乐彩票| www.954054.com-凤凰竞彩官网| www.185654.com-中国福彩宗旨| www.657403.com-怎样研究七星彩规律| www.119915.com-五分快三倍投的赢法| www.240980.com-彩库宝典最快开奖| www.280563.com-重庆时时彩不开奖了| www.517465.com-我爱彩票登陆| www.939646.com-福彩通有没有挂| www.1711.com-金手指彩票指南| www.461188.com-广西中彩网-| www.756332.com-4567彩票网站| www.820025.com-彩票能异地兑奖吗| www.892575.com-福彩3地图迷总汇| www.953509.com-竞彩直播比分| 500彩票www.50064k.com| www.jz76.com-彩票2元app-| www.478037.com-积分兑换福利彩票| www.01gf.com-福彩3d万能二码表| www.95691.com-福彩第一期中奖号码| www.026898.com-13彩是不是正规的| www.092888.com-中国福利彩票六加二| www.1769.me-地球人彩票手机版| www.7750.vip-风彩彩票是骗局吗| www.31980.com-江苏省福利彩票网| www.461625.com-彩票是怎么做代理的| www.630309.com-彩吧3d第四版| www.768003.com-体彩开奖时间是几点| www.912747.com-彩客网咋样-| 99彩票www.66907.cc| www.479229.com-深圳福利彩票店申请| www.610014.com-彩票372-| www.bw18.com-彩乐网福中网| www.uy18.com-贵州福彩快3中奖| www.00yi.com-福利彩票儿等奖| www.43954.com-彩宝苹果版ios| www.98858.com-玩快三下大就死| www.3430.vip-官方高频彩有哪些| www.47636.com-好彩妹好朋友| www.89731.com-胜负彩新浪爱彩| www.670388.com-中国彩票有多少个| www.809530.com-店之宝彩票下载安装| www.02az.com-彩虹都是七种颜色吗| www.709158.com-1305彩票合法吗| www.786500.com-彩票大赢家预测| www.858099.com-乐购彩票app| www.969703.com-追号的彩票-| www.np47.com-彩票大小走势分析| www.892157.com-竞彩足球历史战绩| www.954790.com-瑞彩祥云红包挂| 幸运彩票www.915399.com| www.qt50.com-福彩中心在哪| www.03630.com-千万别买彩票| www.627275.com-256彩票下载安装| www.719407.com-福彩排列5今天开奖| www.4610.com-买彩票中奖流程| www.50488.cc-足球彩票网址| www.628795.com-彩票代打兼职招聘| www.220346.com-优信快三彩票主页| www.869397.com-购买七星彩投注网站| www.960666.cc-彩票刷反水-| 39彩票www.3933d.cc| www.65hc.com-福彩演播室答案| www.981252.com-排列三新彩网预测| www.oy93.com-宁夏福彩中心地址| www.64rk.com-足彩qq群俱乐部| www.oz37.com-宁夏体彩11迭5| www.987594.com-福利彩票083期| www.mi14.com-福彩快三快输死人了| www.4rc.com-福彩双色球怎么看| www.069114.com-河北快三违法吗| www.137225.com-七彩的骗局-| www.292902.com-快三投注计算| www.352826.com-手机买黑彩-| www.537018.com-彩票店红火的名字| www.759261.com-体彩种类和奖金| www.827243.com-彩票中什么叫龙| www.882547.com-高频彩正规吗| www.980703.com-福彩店转让协议| www.cp102.cc-彩票过滤软件| www.534813.com-本期七星彩奖表图| www.1027.com-万彩吧3d开奖结果| www.4410.in-足彩返奖率怎么算| www.14176.com-2018年体育彩票| www.727973.com-山东中彩乐下载| 凤凰VIwww.fh17.com| www.13hv.com-7好彩高手论坛| www.93jq.com-最近中国福利彩票站| www.139624.com-公务员能买彩票| www.366112.com-彩铅画自学能学会吗| www.810031.com-彩票电子竖屏走势图| www.879692.com-赢彩票与你同行| www.946286.com-彩经网走势图电脑版| www.981153.com-旺彩双色球科学预测| VIP彩票www.895544.com| www.fe68.com-长龙彩票-| www.112678.cc-七乐彩查询中奖号码| www.115439.com-网上彩票代购软件| www.765780.com-淘宝彩票网七星彩| www.39638.com-九彩彩票-| www.670042.com-海南七星彩图版| www.752209.com-福利彩票怎么开店| www.834833.com-炫彩界面库使用方法| www.909943.com-3d彩界过客胆码| www.972063.com-王者彩票1-|