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.cb96.com-网络彩票平台下载| www.02gw.com-世界杯体彩不让买了| www.88dy.com-卖彩票利润-| www.nd20.com-甘肃体彩网-| www.921008.com-608彩票-| www.535623.com-8位彩票-| www.816733.com-吉林快三怎么样| www.904716.com-手机买彩网-| www.969744.com-网上购彩平台有吗| www.87pv.com-体彩大乐开奖规则| www.3898.win-彩票和制图-| www.02186.com-玩彩票倾家荡产| www.067.cn-手绘彩铅人物| www.8524.cc-福利彩票老虎机子| www.36942.com-南京福彩快三| www.287255.com-安徽快三是真是假| www.445844.com-买老凤祥彩金可以吗| www.569202.com-3d图吧彩吧-| www.659567.com-中国足球彩票网下载| www.751413.com-淘金彩票有挂吗| www.836077.com-广东好彩1今晚| www.919178.com-时时彩注册网| www.9208.org-上海彩票店利润多少| www.62rz.com-下彩网平台网站| www.5172.cn-韩国五分快三| www.26183.cc-彩虹的变化过程| www.74446.cc-3d彩票选号技巧| www.5768.vip-助赢时时彩计划软件| www.356415.com-彩票订单-| www.515478.com-阜阳彩票案最终结果| www.616271.com-乐彩网老图标| www.700820.com-福彩3地天天彩图| www.77442.cc-2019竞彩规则| www.67lc.com-网页一青蛙彩导航网| www.4856.top-梦见彩票站-| www.04304.cc-微信支付投注彩票| www.136848.com-北京七彩集团| www.178191.com-手机网上买彩票| www.303458.com-甘肃快三冠军走势图| www.041056.com-摩登彩票挂机软件| www.961736.com-星彩网双色球预测| www.pu8.com-南洋乐和彩开奖结果| www.xl98.com-福彩3d单一走势图| www.789157.com-彩妆店铺名字大全| www.882485.com-一分彩票-| www.971470.com-七乐彩今天晚上开奖| www.273596.com-福彩七加一-| www.570357.com-七彩虹gt960| www.972217.com-鸿运五分彩走势图| www.hf2.com-安徽省快三遗漏号| www.up38.com-彩票快三走势图| www.04lb.com-彩铅绘画人物教程| www.63zx.com-福彩男主持人广超| www.69275.com-福彩十五选五下载| www.2yb.cc-金牛彩票维护| www.8512.org-游戏机彩票攻略| www.012383.com-一定牛彩票可靠吗| www.833286.com-七星彩论坛南海网| www.925173.com-财神彩票网站| 500彩票www.50051a.com| www.la71.com-复式彩票中奖| www.829355.com-cp9彩票官网| www.927111.com-深圳福彩快乐彩输了| www.ef8.cc-福利彩江苏快三下载| www.xx02.com-吉祥彩票网平台登录| www.989293.com-瑞祥彩云app| www.dw37.com-海南五星彩开奖号码| www.756128.com-旺彩超级大乐下载| www.857936.com-足彩比分分析软件| www.957522.com-14场足彩预测| 全民汇彩票www.52303t.com| www.120536.com-彩票投注站多少钱| www.231740.com-好彩票安卓版| www.329644.com-玩快三坑钱了| www.412234.com-彩控票-| www.521251.com-福彩三d千禧开机号| www.581414.com-民政厅负责彩票部门| www.61326.com-家彩开机号-| www.030358.com-购彩app停售| www.119737.com-发彩网是什么| www.216396.com-7星彩玩法开奖说明| www.290315.com-黑龙江快三开奖| www.504202.com-十选一是什么彩票| www.607059.com-买福利彩票咋写好好| www.684566.com-福彩3d杀和值尾| www.750905.com-彩点红单助手下载| www.813425.com-彩票机选能中奖吗| www.134831.com-好彩双爆珠怎么抽| www.273811.com-福彩3d30期开奖| www.633786.com-彩乐汇是什么平台| www.728608.com-体彩网app安全吗| www.356436.com-智慧彩软件挂机| www.504508.com-彩排彩的意思| www.571018.com-查彩票中奖-| www.777000.com-彩6官方下载ios| www.202331.com-贵阳体彩-| www.327626.com-福彩3d矩阵宝典| www.397478.com-体彩排列的怪字神贴| www.2117.cm-江苏体彩下载安装| www.269331.com-彩票站打错号码案例| www.460017.com-懂彩的卖彩票可靠吗| www.560022.com-三d双彩论坛专区| www.618510.com-经营福彩还是体彩好| www.683171.com-深圳彩票实名| www.746941.com-红包彩票平台| www.807717.com-七彩app官网| www.874712.com-人人中彩票软件| www.937714.com-体育彩票号码| www.980234.com-彩12彩票-| www.am8.com-内蒙快三彩乐乐推荐| www.rx41.com-中彩网登陆-| www.22sw.com-福彩588app-| www.0106.net-彩属于五行属什么| www.19777.com-嘉兴体彩中心主任| www.540084.com-百乐彩是黑平台吗| www.672714.com-中彩网开奖公告| www.la39.com-彩56app-| www.06lu.com-吉林市黑彩快三| www.85ki.com-竞彩四串五玩法讲解| www.3368.com-易购彩票是正规的吗| www.23259.com-彩神3是真的吗| www.532223.com-彩厍寳典旧版| www.604051.com-深圳然彩服饰录上| www.672736.com-彩票缩水软件下载| www.747065.cc-北京时彩时彩开奖| www.802727.com-彩票开将查结果| www.872911.com-彩之星网址-| www.379113.com-潢川彩票30万大奖| www.499342.com-倍投彩票是真的假的| www.599681.com-体彩店能买福彩吗| www.678833.com-意彩国际官方信誉盘| www.775457.com-慱发彩票-| www.964804.com-辽宁体彩票-| www.9288.win-大乐透走势图体彩| www.434348.com-福利彩票的营销计划| www.169189.com-江苏快三规则| www.252069.com-人人彩票合法吗| www.196201.com-彩票万能预测软件| www.27sl.com-向日葵团队彩票登陆| www.0740.me-e球彩中奖助手下载| www.8250.xyz-腾讯5分彩万位计划| www.36377.cc-品彩-| www.99412.com-玩彩老手双色球专栏| www.929044.com-老有人让我玩福彩网| www.993181.com-如何在高频彩里赚钱| www.fy40.com-彩票幸运5分钟开奖| www.g78.cc-c8万彩吧cn开奖| www.38bv.com-青蚌彩-| www.320.mobi-多彩网彩票注册网址| www.4782.vip-永盛彩票网app| www.08416.com-福彩3d推荐号码推| www.57778.cc-我要中彩票下载| www.001952.com-深圳市福彩中心| www.929371.com-牛蛙彩票正版资料| www.zc47.com-彩票话术-| www.5556.biz-如意彩票网四季彩| www.27722.cc-彩铅画火锅-| www.85034.com-群英会开奖彩乐乐| www.026584.com-泌县彩英说唱团| 13e彩票www.815870.com| www.qf88.cc-彩10app-| www.31hf.com-彩虹岛名片-| www.759.cc-福彩3d漏洞号码| www.3967.com-上海彩礼和嫁妆|