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天

知道了
TT快3 www.813574.com-买足彩算赌博吗| www.796172.com-众博彩票下载安装| www.96315.com-彩票何时才有的| www.qq93.com-福利彩票是否公正| www.249090.com-彩票庄家会输钱吗| www.257603.com-038彩票作弊| www.019225.com-复式彩票多少钱| www.821779.com-附近福利彩票点| www.953906.com-天下彩票计划| www.55ec.com-九州彩票代理邀请码| www.nm98.com-足彩竞彩推荐| www.wy4.cc-彩吧论坛首页| www.212114.com-广西快三全天多少期| www.1992.wang-彩票微投资是真的吗| www.7773.tv-肖立刚推荐福彩3d| www.448776.com-山西福彩客服电话| www.190986.com-内蒙快三新规定| www.768308.com-幸运彩票安卓版下载| www.862580.com-七乐彩中了3个号码| www.939469.com-彩票哪个平台好| 大福彩票www.df79.com| www.38295.com-大奖彩票是大平台吗| www.270342.com-人人中彩票合法吗| www.358366.com-2019年高频彩票| www.454749.com-全球主要博彩公司| www.545502.com-足彩竞猜规则| www.613244.com-彩788安全吗| www.680455.com-彩票中奖去哪领| www.755299.com-一定牛买彩票安全吗| www.824779.com-68彩票黑平台| www.893081.com-在线做号工具时时彩| www.959176.com-欧洲彩票巨奖骗局| 吉彩www.806726.com| www.56158.cc-中彩在线华彩| www.009416.com-人人彩票怎么玩法| www.47011.com-三分时时彩带人计划| www.527667.com-百乐彩娱乐官网下载| www.623408.com-春秋彩票娱乐平台| www.710844.com-手机刷彩是干嘛的| www.849250.com-河内分分彩开奖记录| www.924146.com-大快发3彩票| www.991833.com-分分彩有规律吗| www.jc26.com-彩票倍投狂人| www.1yl.com-手机彩膜批发市场| www.544033.com-中彩票3地走势图| www.643459.com-幸运十分彩怎么玩| www.730860.com-篮球外围竞彩网站| www.820210.com-天价彩礼现象| www.904710.com-福彩快3投注网| www.972220.com-19029期七星彩| www.bz8.com-577彩票app-| www.391300.com-四季彩票官网下载| www.539747.com-查找附近体育彩票店| www.88417.cc-奥地利彩票中最大奖| www.087353.com-7星彩复式计算器| www.221229.com-中国彩票开奖查询| www.310444.com-福彩3d术语大全| www.366998.com-麋鹿彩铅画唯美| www.476868.com-福少时时彩做号| www.552325.com-众彩网邀请码| www.615966.com-体彩扑克牌对子包选| www.682755.com-彩票微信推广找老板| www.753729.com-搜狗彩票.net| www.815581.com-排列五福彩还是体彩| www.887330.com-下彩网彩票时时彩| www.951240.com-特彩吧报码开奖| www.996214.com-体彩胜负过关| www.ee44.com-赚佣金彩票代打| www.ur69.com-内蒙古快三二同| www.264943.com-吉林快三跨度| www.632418.com-七彩云盒密码多少| www.702837.com-色彩对比-| www.776320.com-福州彩票中心图片| www.840034.com-正规彩票有哪几种| www.898694.com-福彩正版真精华布衣| www.960495.com-大乐透3亿彩票照片| 凤凰彩票www.5091c.com| www.173335.com-极速快三怎么看计划| www.056722.com-体彩网站下载| www.299246.com-怎么看一分快三走势| www.508148.com-彩票套票如何打印| www.225566.com-彩民群-| www.883172.com-彩票737-| www.517440.com-匕乐彩推荐号| www.645734.com-竞彩足球技巧| www.809199.com-彩票的中奖概率多少| www.920492.com-彩神iapp-| 购彩堂www.113438.com| www.cp5593.com-吉林新快三开奖信息| 乐博彩票www.67258a.com| www.031177.com-跟团队买彩票骗局| www.678171.com-福彩3天吉预测| www.45254.com-微彩站正规吗| www.778046.com-体彩app在线下载| www.959386.com-长乐坊彩票能提款吗| www.dd67.com-彩票店是亚盘么| www.1801.vip-135彩票平台| www.52261.cc-时时彩爱乐网站| www.95062.com-中国福彩在线游戏机| www.105705.com-通博彩票官方网址| www.772422.com-博彩技巧大全书籍| www.554230.com-彩票短租-| www.6700.vip-新生彩票官方网站| www.682508.com-公益时报中华彩讯| www.876664.com-体彩排列三杀尾| www.979393.com-泰国好彩-| www.14om.com-竞彩足球违法吗| www.6222.net-福彩社区论坛| www.96867.cc-彩票打官司案件| www.16866.com-体彩在哪买-| www.f96.loan-体彩今日字迷总汇| www.899050.com-福利彩票117期| www.987845.com-5分快三赚钱的方法| www.kg10.com-山东福彩app官网| www.y92.cc-新宝5彩票软件| www.62tw.com-招彩票店销售员| www.975.com-体育彩票的玩法说明| 福利彩票www.8039f.com| www.930193.com-竞彩篮球彩票知识| www.w81.cc-神彩奕奕那个字错了| www.397.red-u58发发彩下载| www.wm68.com-178彩票网下载| www.25mk.com-线上彩票为什么被禁| www.0695.xyz-怎么申请福彩投注站| www.6016.vip-足彩最新推荐| www.11723.cc-网上博彩有赢的吗| www.53534.cc-大福彩票靠谱吗| www.94531.com-买彩票到底会中奖吗| www.070377.com-大发快三自动预测| www.128732.com-福彩刮刮卡多少钱| www.257012.com-瑞彩祥云彩票下载| www.875796.com-福彩快3调整时间表| www.233997.com-快三是国家开的吗| www.53552.com-时时彩买法漏洞| www.104084.com-哪个彩票网正规| www.do46.com-高频彩票预测网| www.393484.com-今天彩票开什么号码| www.373728.com-天天彩票是真的吗| www.541777.com-大连市体彩中心官网| www.681811.com-麒麟彩票可靠吗| www.823453.com-竞彩购买大厅500| www.987002.cc-什么购彩平台安全| www.rc96.com-大发快三经验| www.0800.top-彩票站买足彩| www.12195.com-体彩双色在几频道| www.76755.cc-体彩任选九开奖时间| www.813576.com-丈夫买足彩赌博欠债| www.913910.com-彩16官网手机登录| www.972546.com-彩铅插画小清新| 幸运彩票www.981500.com| www.gq88.cc-广东好彩开奖结果| www.vp83.com-湖北福彩网彩票| www.km24.com-江苏体彩七位数多期| www.19bp.com-五亿彩网络官网| www.877215.com-七乐彩四个号多少钱| www.507639.com-华彩网彩神vl| www.877085.com-福彩3d速查表技巧| www.981770.com-彩票双色球手动选号| www.069036.com-01彩票真的能赚钱| www.225328.com-福彩快三有规律吗| www.285418.com-做彩票-| www.036776.com-下载旺彩彩票| www.165196.com-体彩七位数怎么兑奖| www.276002.com-上海福利彩快三|