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.567681.com-图谜总汇牛彩| www.696810.com-澳门竞彩-| www.791134.com-彩大师彩票出号机| www.064744.com-乐迎彩票-| www.391785.com-山东福彩网3d| www.518865.com-史上彩票最大奖| www.188757.com-vip彩票官网| www.279359.com-三分时时彩免费计划| www.7665.vip-福彩标志图片含义| www.63503.com-浚县彩礼多少钱| www.028753.com-福彩3d五行和值尾| www.117501.com-足彩票比分500| www.196102.com-幸运快三规律破解| www.268050.com-山东福彩网群英会| www.350718.com-彩色激光打印机推荐| www.453948.com-彩钢泡沫夹芯板价格| www.552753.com-七星彩开奖电视台| www.792731.com-彩票领奖要多久| www.930830.com-体彩生肖乐-| www.cai5133.com体彩19035期| www.3gt.com-雅彩彩票假的| www.0101.la-含有彩字的网名| www.46655.cc-时时彩注册账号平台| www.097017.com-彩票哪个奖金最高| www.241766.com-七星彩咋玩-| www.365330.cc-彩库宝典安装不了| www.557048.com-九万彩票是谁开的| www.092144.com-彩票游泳481开奖| www.271975.com-广西快三分开奖| www.524768.com-彩票中的数学ppt| www.188259.com-江苏快三奖金规则| www.319656.com-七星彩中奖号码查询| www.235326.com-福彩网平台软件| www.352225.com-完美彩票i首页登录| www.654740.com-七星彩大奖图片| www.px85.com-海拔彩票下载| www.72sv.com-中华购彩网-| www.eg08.com-佰萬彩票-| www.1237.pw-彩神争霸8网站| www.tl72.com-快三个骰子点数规律| www.1225.cc-博一把博彩论坛| www.106346.com-今晚七星彩出什么奖| 博友彩www.369908.com| www.291077.com-福彩乐彩网3d| www.dx0.cc-北京快三玩法技巧| www.219747.com-彩宝贝网-| www.910260.com-福彩彩报第一版| www.038166.com-福彩3d中奖扣税吗| www.302440.com-福彩快三一天开几次| www.625223.com-斗牛娱乐彩票游戏| www.906305.com-福利彩票有哪些种类| www.554504.com-双色球彩票预测号码| www.756883.com-体彩快乐扑克怎么玩| www.961180.com-鸿乐彩票下载| www.2zn.com-举报网络彩票有用吗| www.087813.com-快3彩票有猫腻吗| www.288756.com-熊猫彩银-| www.6551.cc-福彩三地今日试机号| www.900429.com-赢彩app下载| www.516236.com-快三手机单机游戏| www.37571.com-福利彩票多久没中了| www.166846.com-uu快三技巧-| www.036047.com-彩计划下载福彩3| www.97255.cc-竞彩足球世界杯竞猜| www.213803.com-人人中奖彩票软件| www.565905.com-盐城建湖万彩国际| www.602190.com-彩票伪造-| www.870236.com-凤凰彩票平台合法吗| www.822500.com-竞彩论坛空间| www.535315.com-彩票几位数中奖号码| www.2292.pw-湖北快三两码遗漏表| www.108972.com-彩票打错责任谁担| www.429783.com-水彩教-| www.153078.com-福彩快三是真的假的| www.847079.com-竞彩盈亏公式| www.79779.cc-388计划彩票网| www.312693.com-福彩三d和制图| www.420087.com-360彩票幸运购| www.697166.com-体彩虚拟足球技巧| www.97266.cc-彩票辅助可靠吗| www.129373.com-众彩市场一日价格| www.960579.com-注册送彩的彩票| www.087282.com-彩票开奖视频| www.277316.com-七星彩去哪才能买| www.487434.com-趋势王彩票推荐| www.652399.com-彩宝网双色球开奖| www.jj08.com-加盟彩票店赚钱吗| www.025545.com-网上彩票真能挣钱吗| www.683283.com-怎么玩分分彩压大小| www.78cf.com-境外博彩客服| www.456556.com-购物送福利彩票| www.430938.cc-彩虹王国-| www.k40.top-松原吉林快三微信群| www.70380.com-奔驰彩票登录入口| www.823918.com-福彩3d模拟摇奖噐| www.cp6100.com-内蒙快三跨度走势图| www.702759.com-网络竞彩骗局| www.7173.loan-通博搏彩-| www.103153.com-彩乐网的网址| www.336194.com-体育彩票排5历史| www.277.live-七星彩三字定图片| www.9765.cc-3d走势彩宝贝| www.706970.com-微信上能买彩票么| www.256657.com-官方彩江苏快三| www.85101.com-这附近哪有彩票店| www.042173.com-体彩足球竞彩玩法串| www.530544.com-时时彩稳定缩水技巧| www.794443.com-重庆寸时彩开奖号码| www.jw13.com-蒙娜丽莎彩铅临摹| www.145267.com-今天彩报图库| www.704482.com-128彩票平台下载| www.52952.cc-福彩快三太黑了| www.220914.com-旺彩娱乐-| www.577608.com-彩虹糖有几种颜色| www.855785.com-玩竞彩吧挣钱吗| www.38282.com-七星彩专家荐号| www.630268.com-3月24号福彩| www.598516.com-七星彩19022| www.115026.com-顺势而为彩票软件| www.281787.com-福彩双色球领奖地址| www.444887.com-应聘彩票销售员| www.104822.com-天下彩票计划| www.903023.com-彩票网站诈骗任务| www.903831.com-百福彩官网下载| www.79110.com-手机彩铃怎么定制| www.gd06.com-彩虹玫瑰-| www.611221.com-彩票站的投入| www.814221.com-河北体彩网七星彩| www.kc5.com-体彩江苏ll1选5| www.v96.biz-3d彩规则-| www.539507.com-彩宝贝预测汇总对比| www.45847.com-公益彩票可信吗| www.562408.com-吉利彩票电脑版| www.837656.com-福彩3d讨论-| www.976749.com-彩礼数额意义| www.070913.com-365彩票下载安装| www.95709.com-民政局福利彩票中心| www.255193.com-澳洲时时彩开奖记录| www.25gy.com-风采与风彩的区别| www.592911.com-彩虹桥上做什么| www.790868.com-体育彩票选号助手| www.128301.com-买彩票什么是倍投法| www.778509.com-彩乐汇下载安装| www.258070.com-大赢家彩票手机版| www.676116.com-福彩三地的基本走势| www.968604.com-重庆时时彩怎么加群| www.731605.com-易彩集团账付| www.99cp.com-绝算彩票3-| www.278887.com-福彩app官方| www.58729.cc-竞彩牛师傅-| www.774159.com-网上彩票买大小| www.6451.vip-速8彩票是正规的吗| www.71709.com-精英彩票高手网| www.122049.com-中乐彩官网登录| www.271507.com-顺丰丰彩有人中奖吗| www.369446.com-611彩票-| www.559776.com-诺亚彩票官网| www.877863.com-福彩20选5开奖| www.170290.com-如何看懂快三走势图| www.385075.com-吉祥彩票是真的吗| www.630011.com-福彩3d新玩法介绍| www.881730.com-彩票软件定制价格| www.85019.com-七星彩走势新浪财经| www.111925.com-酷彩吧靠谱-|