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天

知道了
500彩票竞猜 www.767982.com-怎样购买外国彩票| www.748131.cc-福彩3d绘图-| www.309789.com-足彩3场2关-| www.6655.org-老实时彩360| www.719829.com-福彩3d组6走势图| www.948185.com-中彩网开机号| 幸运彩票www.444083.com| www.436563.com-体彩5800万-| www.3581.com-稳定赠送彩金平台| www.742365.com-天天中彩五码原创| www.978954.com-快三怎么中奖多少钱| www.06dk.com-国产彩妆-| www.77639.cc-360官方彩票网站| www.0950.org-苏州竞彩快3| www.6670.cc-七彩网络红人| www.156217.com-福利彩票的几种买法| www.38196.cc-e彩堂违法吗| www.009988.com-彩友网彩票-| www.090045.com-至尊彩网邀请码| www.409896.com-彩票扑克三怎么玩| www.530387.com-时时彩网页9码计划| www.716166.com-彩铅画竹-| www.740.vip-时时彩和值图解| www.801962.com-福利时时彩开奖| www.8717.top-快三猜测-| www.036827.com-下载全民240彩票| www.8809.cm-白袍法师乐彩网百度| www.11532.cc-易彩票安全官方网站| www.856.date-新浪竟技风暴彩票网| www.310032.com-体彩主任违法乱纪| www.474155.com-福彩3d073期| www.656542.com-爱彩乐输了二十多万| www.825708.com-山西大清快三走势| www.997807.com-乐彩3d和差-| www.ju26.com-彩铅颜色搭配口诀| www.85966.com-彩铝板的价格| www.sc69.cc-分分彩后一杀一码| www.790678.com-手机上玩黑彩犯法吗| www.dk33.com-体彩7星彩开奖规则| www.53uy.com-七乐彩开奖沽果| www.3993.in-彩客?-| www.933903.com-彩票托成功后| 8号彩票www.81520w.com| www.217160.com-快三省份-| www.508332.com-彩票旧票-| www.xi5.com-湖北湖北福彩| www.b89.xyz-三分时时彩是真的吗| www.61vr.com-白菜网送彩金平台| www.082323.com-哪个软件可以买快三| www.210606.com-极速快三是官方彩票| www.22va.com-彩票app在哪里好| www.51604.cc-宁夏福彩快3官网| www.057191.com-体彩都有哪些玩法| www.816782.com-天天中彩票中奖截图| www.992904.com-微信彩票赚钱下载| www.fi46.com-中国体彩网官网| www.02lh.com-彩虹屁什么梗| 天天彩www.87096.com| www.40857.com-爱彩导航线路| www.91472.com-福利彩票26期| www.839535.com-足彩欧赔-| www.960584.com-揭秘极速赛车彩票| www.cp628.com-彩神大发快三靠谱吗| www.sg89.cc-预测时时彩-| www.853.red-白鸽彩票-| www.404.black-旺彩票app-| www.79579.cc-天气网福彩3d| www.45ff.com-快三新周易魔图公式| www.411849.com-利辛七彩世界| www.7179.cn-500博彩官网| www.441140.com-体育彩票有nba吗| www.16xe.com-山东体彩排列三论坛| www.04kq.com-城市风景彩铅画| www.w15.bid-福彩3d牛彩冈图迷| www.75mj.com-彩绘图片-| www.799201.com-欢迎一品彩票网| www.143855.com-福彩迷平台是骗局吗| www.303918.com-鑫彩网app-| www.436411.com-玉溪体彩中心| www.560596.com-云彩网彩票正规吗| www.638285.com-上海竞彩网点| www.26wj.com-体彩代理加盟| www.28881.cc-中华体彩网-| www.239229.com-正规购彩平台有哪些| www.863025.com-卖私彩判刑还是拘留| www.764268.com-爱彩人彩票网首页| www.518469.com-美国彩票记录| www.538040.com-国彩彩票邀请码| www.735382.com-七乐彩一等奖| www.799259.com-奔驰彩票qq客服| www.359513.com-彩票老司机软件| www.731925.com-濮阳的彩礼多少| www.805676.com-二八彩app-| www.877831.com-体彩排列5几点开奖| www.957310.com-红牛彩票的苹果入口| 财神网www.29277q.com| www.dx54.com-快三街机游戏| www.731012.com-竞彩比分唯彩| www.794888.com-飞鱼体育彩票网址| www.866287.com-搜狐彩票网官网首页| www.922967.com-亚盘500彩票| www.976722.com-潍坊彩礼2018| www.cp6111.cc-彩票下载手机版| www.se77.com-浙江福彩网官网| www.68270.com-新加坡五合网彩图库| www.136283.com-成功彩票登录大厅| www.231200.cc-购彩平台-| www.343893.com-家里人迷上买彩票| www.464062.com-香港全球彩票| www.620322.com-美国彩票网上能买吗| www.257092.com-玩黑彩快三能赢钱吗| www.516785.com-彩票中奖识别软件| www.700747.com-彩套印刷-| www.812833.com-七乐彩论坛-| www.681219.com-牛彩赚钱靠谱吗| www.770497.com-买彩票的幽默段子| www.846132.com-彩票怎么知道| 500彩票www.50064s.com| www.763608.com-红点足彩预测app| www.036716.com-彩1下载安装| www.3266.me-江苏福彩3d快三| www.872094.com-q彩网是合法的吗| www.50jz.com-足彩盘口分析口诀| www.93126.com-大乐透彩宝贝网| www.29729.cc-大爆奖彩票官方网站| www.ut84.com-彩票流水什么意思| www.607714.com-星期五七乐彩走势图| www.699173.com-彩铅画新手入门| www.126364.com-九万彩票下载安卓| www.88603.com-66网赌彩票-| www.15619.com-众盈彩票是骗人的吗| www.00mk.com-七星彩十位百位定胆| www.91wx.cc-快开福彩是骗人的吗| www.04468.com-彩票微助手下载安装| www.711352.com-山东体彩论坛手机版| www.501217.com-湛江网投彩票| www.368121.com-欧冠竞彩分析| www.123945.com-深圳彩票6000万| www.111701.com-快三如何避免长龙| www.263797.com-彩票纸回收用途| www.401789.com-七星彩纪橙-| www.119379.com-5分钟一期的传统彩| www.1415.cc-重庆十字彩开什么| www.26493.com-福彩快三安卓版| www.129253.com-众亿彩票网官方网站| www.222689.com-河南快三专家预测网| www.kt37.com-快三怎么算和值| www.21383.cc-有人说带我买彩票| www.380693.com-福彩3d怎么摇的| www.669741.com-彩钢夹芯板价格表| www.265886.com-宁夏福彩网-| www.278564.com-彩256-| www.946440.com-福建福彩中心在哪| www.68832.cc-后二彩票选号神器| www.5673.biz-中彩啦开挂什么意思| www.37811.cc-互联网销售的彩票| www.078850.com-幸运时时彩走势图表| www.166572.com-快三助手破解版| www.662936.com-彩迷网在哪里找到| www.762592.com-五分时时彩开奖计划| www.818232.com-2o13彩票网-| www.876675.com-幸运彩票网提现被黑| www.7767.biz-c9彩票论坛-| www.153771.com-七星彩往期中奖查询|