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.500722.cc-1寸彩照什么颜色| www.647884.com-天天快三彩票| www.957195.com-金利网彩票-| www.67iz.com-太原福彩转让| www.04486.com-微信提现的彩票网站| www.330961.com-乐赢彩票网页版| www.282989.com-黑客破解彩票| www.52175.com-高频彩种行业赚钱| www.206959.com-易彩app下载| www.586047.com-天天爱彩票人工客服| www.959684.com-时时彩对刷-| www.36593.com-澳博彩票下载安装| www.034990.com-坤彩科技价值分析| www.172411.com-体彩快3开奖结果| www.285234.com-天津体彩网-| www.365119.cc-网罗爱彩双色球| www.472687.com-海南七星彩梦解| www.601007.com-福彩导航-| www.683258.com-买彩票输了想死| www.770203.com-好彩堂下载app| www.883813.com-博彩王软件怎么样| www.961975.com-手机怎么下载体彩| www.fh67.com-注册送28彩票| www.10wh.com-足球官方竞彩app| www.92gb.com-51彩票网软件下载| www.05246.com-大圣彩票软件| www.66917.cc-大连体彩福彩转让| www.022364.com-88彩票手机官网| www.079628.com-体育彩票号码玩法| www.130503.com-农村彩礼-| www.203952.com-体彩排列5开奖| www.296262.com-快三走势快三走势| www.082225.com-时时彩个位大小判断| www.448414.com-足球竞彩彩票网站| www.584378.com-北京彩票票面的秘密| www.676890.com-淘彩票怎么下载| www.761040.com-时时彩茗彩平台| www.848259.com-山西彩礼一般给多少| www.919153.com-靠谱的彩票平台制作| www.ec02.com-福彩快三3有规律吗| www.898825.com-甘肃省福彩快三开奖| 500彩票www.320477.com| www.110841.com-今晚体彩的开奖号码| www.240218.com-乐彩网7500-| www.345488.com-体彩大乐透诗谜总汇| 大赢家彩票平台www.186327.com| www.53xy.com-网易湖北快三走势图| www.70219.com-长城彩票网址| www.264434.com-手机购彩安全吗| www.604881.com-288彩票黑钱吗| www.823922.com-天气网福彩预测总汇| www.869502.com-够力七星彩安卓系统| www.881362.com-一定牛彩票官网下载| www.731549.com-支付宝里彩票怎么玩| www.984878.com-神彩争霸官网| www.dg13.com-百宝彩官网-| www.5310.cn-南国七彩星彩论坛| www.91962.com-九龙中彩牛仁五肖| www.260797.com-博众彩票11选5| www.497606.com-神龙彩票官方网站| www.334909.com-山东体彩中心电话| www.993370.com-足彩任选九规则| www.236938.com-足彩复式计算器| www.8557.org-小泉沙彩百度百科| www.5957.biz-体彩公益网论坛| www.ce09.com-足彩网上投注不能买| www.303658.com-双彩网论坛论坛首页| www.06526.com-下载三d彩票| www.94836.com-足彩胜平负概率| www.04ih.com-足彩实体店出票| www.999893.com-海南彩票梦兆| www.0933.vip-竞彩合买网-| www.44.cx-今晚福彩3d水果图| www.313612.com-彩票代打兼职群| www.546644.com-开题彩票店申请书| www.873624.com-青蛙彩票-| www.237171.com-福彩双色球开奖查询| www.323568.com-大奖彩票站-| www.571308.com-时时彩反长龙技巧| www.677777.cc-体彩三码组六遗漏| www.791879.com-快三庄家输-| www.921522.com-彩礼是什么意思| www.420.black-主角中彩票的小说| www.3373.com-微信苏宁彩票| www.77500.com-黑龙江福彩发行中心| www.868221.com-福利彩票摇奖模拟器| www.cai59.com-快三开奖结果上海| www.0205.org-彩票歡樂赛车| www.41306.com-重庆彩票网手机报| www.045680.com-c81彩票下载安装| www.184387.com-不要机选彩票| www.326719.com-天吉网彩票论坛首页| www.473618.com-福利彩票开奖42| www.594365.com-甘肃快三历史开奖| www.732317.com-赢彩彩票官方网站| www.849285.com-彩票3b试机号查询| www.951176.com-张路最新足彩分析| www.53hu.com-快速了解彩票| www.025960.com-快三遗漏数据一定牛| www.133926.com-雷语好彩一预测| www.231184.com-时时彩平台改号| www.358841.com-彩票一般买什么保险| www.530061.com-旧版彩库宝典苹果| www.641908.com-福利彩票海报| www.22538.cc-手机购彩是骗局吗| www.59590.cc-快三专家88彩吧| www.497149.com-福彩手机投注后拿票| www.420808.com-大乐彩网站-| www.572917.com-彩经众乐三分快3| www.751362.com-彩拾下载-| www.963492.com-星空画彩铅简单教程| www.1989.org-老安彩票预测| www.937384.com-彩福大厦总楼层| www.993508.com-体彩竞彩竞彩足球| www.bj74.com-1分快3彩票安装| www.869414.com-7星彩app-| www.976045.com-开封通许结婚彩礼| www.cai3011.com二分快三开奖号码| www.805392.com-金彩彩票是不是骗局| www.826680.com-平台彩票骗局揭秘| www.936235.cc-五星彩票是真的假的| www.986577.com-158彩票下载| www.cp141.com-彩票骗局大揭密| www.135021.com-分分彩大小如何作弊| www.017061.com-5分钟开奖的彩票| www.65112.cc-竞彩足球投资| www.948963.com-购彩网app正规吗| www.421946.com-极速快三开奖记录| www.829292.com-彩九怎样进直播| www.512061.com-统计学可以算彩票吗| www.245781.com-河北福利彩票开奖号| www.364780.com-bf必发彩票网站| www.485834.com-1288购彩网最新| www.507721.com-彩票开奖官网| www.568222.cc-体彩终端机提现指南| www.621651.com-福彩社区-| www.678364.com-完美彩票网站靠谱吗| www.750850.com-9a彩票线路检测| www.823758.com-双色球体彩-| www.880630.com-3号彩app-| www.935568.com-01彩票苹果版下载| www.978193.com-彩钢板尺寸规格| www.cp851.com-共赢彩票官网| www.16136.com-竞彩足球直播吧| www.509648.com-大众彩票官方| www.581787.com-金鹿彩票-| www.637098.com-分分彩做号-| www.739479.com-发彩网怎么赚钱| www.77mc.com-北京彩票体彩大乐透| www.6nr.cc-买彩票花了上百万| www.984273.com-二分彩技巧-| www.2iu.com-彩友团app-| www.292550.com-q彩网正规吗| www.9951.pro-福彩3d一语定胆| www.633055.com-怎么买nba彩票| www.736065.com-无极彩票平台app| www.721566.com-竞彩足球大神推单| www.r70.top-乐彩网3地-| www.657539.com-亿彩苹果下载软件| www.257676.com-甘肃体彩网官网首页| www.354869.com-苏州彩票站转让信息| www.529344.com-能直播彩票吗| www.964260.com-彩票数字筛选软件| www.419325.com-体彩刮刮卡中奖率高|