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.pk10.com www.95rp.com-竞彩胆什么意思| www.8505.vip-北京五分彩投注平台| www.456535.com-彩票巴巴靠谱吗| www.009348.com-178彩票下载| www.0998.cn-百乐彩网址-| www.49682.cc-休彩七位数开奖查询| 竞赢彩票www.86889.cc| www.672732.cc-七星彩2276预测| www.778302.com-官方彩gz-| www.864872.com-足球彩票图片| www.935659.com-彩名堂怎么分析| www.990624.com-江苏省体育彩票中心| www.av44.com-福彩排列5开奖结果| www.td50.com-发彩网免费注册官网| www.23eh.com-彩票排列五玩法| www.97go.com-博友彩票网址| www.3311.biz-彩票有多少个号| www.8936.org-彩票hao○123| www.66273.cc-中国体育彩票下注| www.367816.com-好看的彩铅画风景| www.482868.com-福彩3d表图-| www.567270.com-冮苏体彩七位数| www.637233.com-嘉宝莉3d质彩漆| www.706695.com-私彩能玩吗能赢钱吗| www.782528.com-专业网络彩票| www.854629.com-酷彩网快三被骗了| www.917820.com-彩虹吉他谱周杰伦| www.974747.com-福彩购买-| www.cp468.com-安徽福彩官网| www.of23.com-网上买快彩的网站| www.190146.com-快乐彩牛-| www.341624.com-江苏快三微信计划群| www.775549.com-石家庄体彩中心| www.951122.com-快三走势图小助手| www.yi33.com-贵州快三怎么开奖| www.0128.top-威尼斯彩色岛怎么去| www.30874.com-体彩七位数和值走势| www.021723.com-恒博彩票网骗局| www.140450.com-大连福彩中心地址| www.359488.com-微信群卖体育彩票| www.513109.com-好彩烟出口版| www.623457.com-3d福彩论坛杀| www.85689.com-双色球预测授渔看彩| www.72370.com-手机购买福彩双色球| www.079304.com-快三末班车-| www.233168.com-快三赢钱技巧规律| www.357606.com-顶呱刮彩票技巧| www.552910.com-金钥匙时时彩计划| www.691756.com-76c彩票合法吗| www.812572.com-福彩3d解码技巧| www.935521.com-时时彩个位定胆算法| www.ae1.cc-中国体彩快三走势图| www.j67.net-人人盈彩票安全吗| www.85bv.com-网易彩票看走势| www.6931.bid-竞彩一月赚10万| www.52377.cc-天猫福彩-| www.029712.com-内蒙古体彩中心客服| www.573463.com-258彩票网下载| www.697085.com-中国快三分分彩计划| www.819431.com-好彩票官网更新公告| www.4912.cm-什么app能买竞彩| www.32515.cc-好运快三游戏| www.100092.com-极速3d彩票贴吧| www.222236.com-泰安大乐透3亿彩票| www.391965.com-天禧彩票网正规吗| www.560825.com-足彩app大小球| www.cp5159.com-上海快三是怎么玩的| www.868157.com-湖北快三推荐牛| www.587623.com-香港c8万彩吧| www.726023.com-福利彩票中奖走势图| www.836567.com-福建体彩136| www.099920.com-九州彩票网是真的吗| www.uy52.com-彩吧图库3d第三版| www.e82.top-彩票大厅双色球| www.0996.date-彩票cp544cc| www.224424.com-上海快三开-| www.29kp.com-028期彩票-| www.570778.com-福利彩票保障网| www.333739.com-彩票振幅走势图| www.590812.com-球赛竞彩app| www.71504.com-河南省福彩在哪兑奖| www.698019.com-6和彩生肖开奖结果| www.33zs.com-牛彩七星彩预测号码| www.332898.com-快乐投彩票-| www.239229.com-正规购彩平台有哪些| www.905693.com-yy彩票揭秘-| www.0117.top-彩票黑点越少| www.780.org-儿童彩虹画图片大全| www.12986.cc-体彩六加一开奖时间| www.042002.com-国外有没有五分彩票| www.316930.com-彩票投注app下载| www.511456.com-彩虹两个字别称| www.35552.com-竞彩店面首页| www.088278.com-澳客彩票全部版本| www.429018.com-德州好彩-| www.28252.cc-吉祥彩票充值安全吗| www.039956.com-福彩双色球| www.603723.com-天天乐彩票下载| www.ye85.com-好彩在线是合法的吗| www.64lb.com-众彩彩票合法的吗| www.550467.com-全发彩票怎样玩| www.372379.com-江西快三吧-| www.528263.com-中国体育竞彩计算器| www.584419.com-排球彩票怎么买| www.539690.com-深圳福彩是独立的吗| www.789820.cc-澳客网篮球竞彩比分| www.72925.com-体有彩票开奖号码| www.167486.com-中国福彩快3玩法| www.598329.com-体彩19065期| www.962672.com-体彩顶呱刮运8活动| www.536.name-褔体彩开奖公告查询| www.866281.com-搜狐体彩预测| www.31qc.com-盛澳竞彩有哪些单位| www.258359.com-华厦彩票-| www.386839.com-6698彩票心水| www.047556.com-百宝彩票网图表中心| www.203946.com-牛彩网3d-| www.360940.com-富贵彩手机版下载| www.456748.com-蛋蛋彩票加拿大| www.mj24.com-时时彩注册送88元| www.64zh.com-vr赛车彩票计划| www.3132.biz-刘大军彩票书籍| www.550903.com-网上合买彩票的吗| www.xw58.com-彩六官网下载ios| www.61cp.cc-完美彩票1app| www.9233.xyz-青岛福彩老年公寓| www.041211.com-下载广西福彩票| www.847533.com-购彩规划是什么| www.969421.com-用酷彩吧合法吗| www.172.cm-彩票11选五任二| www.43913.com-58彩票合法吗| www.433021.com-买的七乐彩七个号码| www.546360.com-易彩堂登录会员| www.58qp.com-体彩竞彩足球群| www.76753.com-彩票开奖查询500| www.116345.com-彩虹羽泉歌词| www.095843.com-中国福利彩票及宗旨| www.583809.com-足彩加高级会员| www.281551.com-时时彩数据遗漏| www.625238.com-51彩票是真是假| www.41806.com-彩票贷款案例| www.19508.com-时时彩规律我找到了| www.370618.com-澳客赢家彩票安卓版| www.604554.com-500c0m彩票网| www.6531.org-六爻预测3d彩票| www.r10.space-体育彩票怎么代理| www.0090.cn-带七彩的网名| www.086558.com-自助彩票机厂家| www.566873.com-青岛福彩中心在哪里| www.874211.com-北京快三和值遗漏| www.31ce.com-3位数彩票开奖查询| www.6252.top-玩彩票解封有风险嘛| www.37374.cc-金山彩票app靠谱| www.49499.cc-百万彩票是不是假的| www.14247.com-分分时时彩在线计划| www.ei55.com-彩钢围挡多少钱一米| www.z25.cc-趋势王彩票分析3d| www.005658.com-福彩3d带线走势图| www.108210.com-天娱彩票是真的假的| www.262283.com-皇都彩票安卓登录| www.722895.com-怎么破解彩票漏洞| www.964361.com-广东体彩官网首页| www.54268.com-时时彩遗漏| www.112115.com-三亿彩票平台|