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天

知道了
百盈PK10 www.132209.com-男方悔婚彩礼全退吗| www.836409.com-福彩三弟太湖谜语| www.954045.com-中国竞彩比分| 凤凰彩票www.88266k.com| www.444053.com-富贵彩票注册官网| www.588464.com-天空彩票与你同行| www.672608.com-彩云追星七星彩预测| www.383840.com-彩裤-| 易旺彩票www.yw373.com| www.756623.com-全民中彩恢复了没| www.100803.com-体彩三天必出胆码| www.215156.com-旭彩美缝剂-| www.287033.com-福利彩票申请流程| www.ad4.cc-中国福彩江苏快三| www.zn93.com-ip彩票代玩论坛| www.32dm.com-彩虹画画-| www.4711.in-买彩票不给钱起诉| www.17910.com-百万发时时彩可靠吗| www.71524.com-手机彩20彩票| www.41jz.com-米彩和昭阳第一次| www.21wi.com-qq里有彩票吗| www.1116.date-竞彩领奖地点| www.8335.com-网上东方彩票靠谱吗| www.85399.cc-彩巴3d迷图第二版| www.25tk.com-彩票平台注册送白菜| www.3458.cc-彩寶網-| www.455590.com-彩票买卖盘-| www.58831.com-福彩快三宣传图片| www.047010.com-51彩票首页-| www.125210.com-幸运彩票官网下载| www.192678.com-彩6下载最新版| www.259372.com-赢家彩票邀请码| www.337871.com-皇马刮彩票-| www.635.hk-快乐彩12选5规则| www.5522.top-河北省体彩中心举报| www.28156.cc-福建体育彩票网官网| www.635092.com-顾乡凯德七彩影城| www.102906.com-k彩登录线路| www.230662.com-彩8安卓-| www.315610.com-百乐宝彩-| www.387397.com-贴彩膜对手机好不好| www.070803.com-足彩咨询师-| www.181577.com-爱乐彩中奖助手| www.284283.com-福利彩票彩种有哪些| www.699268.com-北京时时彩开奖官网| www.h50.cc-杳询彩票开奖结果| www.03cc.com-云南彩票未领取| www.85vm.com-彩票平台有漏洞吗| www.219520.com-哪个平台有湖北快三| www.302828.com-七星彩技巧口诀图解| www.373002.com-怎么判断彩票号| www.045484.com-彩神通代理商| www.201924.com-彩票投注站赚钱吗| www.318660.com-彩中堂-| www.402196.com-易彩彩票网站合法吗| www.ev65.com-旺彩大乐透-| www.yg87.com-彩38彩票注册平台| www.117926.com-浙江体彩下载| www.221756.com-3d彩票谜语图| www.306627.com-正规的彩票投注软件| www.082987.com-宝马彩票apk| www.158001.com-竞彩足球用什么软件| www.364414.com-官网彩票有哪些种类| www.949289.com-香港电脑彩八肖图| 吉利彩票www.66376b.com| www.kr24.com-中彩擂台赛-| www.ys66.cc-体彩中心-| www.226958.com-彩客网首页-| www.945963.com-福建彩票31选七| www.987087.com-22彩票网址-| www.xq7.com-3d彩吧图库-| www.vv26.com-江苏快三贴吧| www.9xs.com-老司机彩票-| www.56kv.com-体彩刮刮乐下载软件| www.665483.com-网易开奖直播七星彩| www.755806.com-183彩票-| www.265729.com-时时彩倍投计算工具| www.349369.com-网络彩票靠谱的| www.406994.com-体彩奇偶号走势| www.3452.pw-免费送彩金的平台| www.398291.com-七星彩晚几点开奖| www.193273.com-湖北快三开奖今天| www.395061.com-彩虹哥卖号-| www.10264.com-2019三月足彩| 幸运彩票www.luck818.com| www.805665.com-福彩快三跟单| www.893879.com-9b彩票app-| www.948636.com-体彩排列五几天开奖| www.983645.com-网络彩票举报电话| 55彩票www.755910.com| www.399419.com-七星彩免费公开直码| www.45pi.com-深圳福彩转让| www.1313.cm-三国最精彩的打斗| www.7790.pw-玩众发彩票输得很惨| www.14159.cc-乐彩app官网下载| www.4xo.com-大玩家时彩-| www.81ps.com-重庆时彩网址| www.1313.vip-重生亿元彩票| www.6880.cm-胜负彩竞猜对象| www.15155.com-温州体彩怎么加入| www.373359.com-体彩100期开机号| www.579745.com-彩票最佳倍投方式| www.640048.com-pc福彩-| www.683009.com-体彩2019新政策| www.727588.com-广东福利彩app| www.92597.com-竞彩足球开奖谁赢了| www.2281.xyz-彩吧图迷库-| www.58326.cc-彩6app官网客服| www.90258.com-七彩草图片大全| www.204468.com-内蒙古快三儿开奖| www.550416.com-李承红休闲快三| www.698982.com-零基础学彩铅风景画| www.753875.com-709彩票提不了现| www.796608.com-京彩集团网址| www.158204.com-数字三彩票选号绝招| www.261585.com-7天彩主页-| www.315720.com-彩虹5无人机发动机| www.370507.com-彩票快三官方网站| www.419940.com-必发彩票是不是骗局| www.481113.com-香港陆和彩开| www.526991.com-彩神x登陆-| www.683889.com-福彩3d妖精条件| www.733107.com-易彩快三大小走势图| www.777074.com-彩宝宝ios下载| www.319225.com-海南七星彩开奖直播| www.444863.com-彩票中三亿交多少税| www.539276.com-超级时时彩缩水| www.320501.com-老彩票-| www.5372.cc-百彩网资料网址| www.22183.com-c58.彩票-| www.59519.com-江西快三的平台| www.95374.com-福利彩票心得体会| www.032896.com-福彩网邀请码怎么弄| www.084448.com-快彩软件下载| www.125521.com-福彩刮刮卡有多少种| www.171073.com-全国彩票开奖| www.217336.com-精准彩票中奖软件| www.258855.com-竞彩单场推荐| www.17746.com-中国足球彩票开奖| www.cp3117.com-彩票端软件下载| www.818272.com-腾讯分分彩开奖号| www.5088.top-福彩客户端下载| www.09726.com-手机上购买福利彩票| www.562626.com-三地彩吧论坛| www.608598.com-像好彩投一样的网站| www.65vr.com-怎么劝爸爸不买彩票| www.8885.live-江苏体育彩票网站| www.4800.xyz-彩6是什么平台| www.9588.com-19年体彩新规| www.06997.com-中国福彩版下载安装| www.60118.com-彩票开奖好123| www.022692.com-做私彩代理犯法吗| www.86521.com-足彩老徐的微博| www.0313.xyz-网彩是怎么赚钱的| www.7728.pw-天天分分彩合法吗| www.579824.com-18彩票网真的假的| www.629856.com-超高吉林快三app| www.009664.com-彩膜和钢化膜的区别| www.55624.com-彩漆方格十字纹竹席| www.2619.net-彩票在线下载| www.13587.com-即时比分胜负彩| www.39767.com-附近彩票投注站位置| www.177125.com-三分快三属于什么| www.281189.com-腾讯分分彩后二公式|