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天

知道了
1分快三 www.725389.com-如何投诉彩票外围| www.875793.com-买彩票的诗句| www.cp3520.com-彩票下级设置返点| www.qj91.com-好彩1及中奖规则| www.15hh.com-e游彩票app-| www.281.red-七星彩中的人好少| www.4772.cc-网上彩票倍投计算器| www.09378.com-105彩票可靠吗| www.59929.com-卓易彩票pc版| www.082870.com-快三有多少个号码| www.159689.com-体彩期3d开奖号码| www.266951.com-福彩快3奖金| www.361292.com-万达彩票娱乐平台| www.460616.com-体彩5d10玩法| www.558807.com-最新福彩3d九宫图| www.638291.com-色彩画图片大全简单| www.774159.com-网上彩票买大小| www.873564.com-足彩蓬蓬i-| www.952697.com-福彩直播频道| 天天彩票www.1035v.com| www.go78.com-三分彩规律-| www.zr05.com-大玩家彩票是骗局吗| www.33zm.com-九万彩票下载ios| www.1618.in-非凡彩票为彩民服务| www.8685.cc-快三限号表-| www.44889.com-qq彩票登录不上吗| www.95136.com-彩票一等奖领奖程序| www.065485.com-红快三走势图带连线| www.137666.cc-下载宝发彩票app| www.220946.com-今日体彩开奖| www.300564.com-彩票开户送38| www.375867.com-彩宝款式图片大全| www.570669.com-七彩云浏览器下载| www.651296.com-中国水彩画大师排名| www.757367.com-福建休育彩票网| www.873223.com-网易红彩跟单靠谱吗| www.56mb.com-彩票站和买宣传语| www.2386.in-福彩快三开奖音乐| www.03950.com-辽宁省福彩官方网站| www.58199.com-苏快三号码走势图| www.103954.com-竞彩360直播比分| www.178065.com-北京快3走势图彩票| www.255687.com-快三哪里可以买到| www.335957.com-买体彩法-| www.416522.com-彩虹7号stem| www.522107.com-手机版博悦分分彩| www.595910.com-陇南市体彩中心地址| www.673137.com-3d彩票结果彩搜网| www.755453.com-福彩三定死规律| www.929777.com-七乐彩胆拖中规则奖| www.988144.com-移动彩票邀请码| www.ny.com-宁夏福彩快三开奖号| www.pg33.com-彩票开奖直播频道| www.03ja.com-v8彩票官网-| www.75jb.com-pp彩票是真的吗| www.1575.win-时时彩安卓计划软件| www.9796.loan-快三现场开奖| www.54093.com-7星彩票几点开奖| www.99656.cc-体育彩票中奖规则图| www.071140.com-甘肃快三官方下载| www.137373.com-苹果7钢化膜彩膜| www.218085.com-彩神大发快三预测| www.293157.com-体彩开机试机号| www.366148.com-更多精彩图片| www.456738.com-蛋蛋彩画-| www.549011.com-福利彩票那几天开奖| www.717020.com-简单小清新彩铅画| www.794995.com-福利彩票如何中奖| www.872338.com-贵州体彩中心公告| www.970429.com-体彩任选5开奖| www.ak91.com-吉林市3彩票| www.sl03.com-网上买彩票报警电话| www.13yw.com-搜索七星彩结果| www.84dv.com-彩票系统供应商| www.2118.cc-天津市福彩中心电话| www.7869.cc-体彩七星彩29期| www.26925.com-北京花园彩票站| www.69490.com-竞彩8串56-| www.084661.com-信彩彩票靠谱吗| www.151984.com-全球彩票是骗局吗| www.255687.com-快三哪里可以买到| www.330032.com-中国彩吧天齐网| www.398885.com-彩神通今日金码| www.549119.com-代理注册彩票| www.629895.com-彩票对子是什么意思| www.700179.com-广西福彩官方网| www.776872.com-彩宝彩票三分时时彩| www.881552.com-如何制作博彩app| www.962420.com-福利彩票怎么随机买| 大赢家彩票平台www.278203.com| www.hd98.com-天天彩票app网址| www.yb52.com-今天时时彩开奖号码| www.33il.com-福利彩票几点关| www.3818.vip-掌游彩官网下载| www.9156.top-福彩三d正版天庚图| www.53169.cc-快三昨日未出号码| www.95798.com-昨晚胜负彩有冷门吗| www.057028.com-安徽快三在哪里买| www.213592.com-佰萬彩票下载| www.281632.com-彩之家软件下载| www.372457.com-七彩色染发图片| www.463178.com-时时彩后三包胆规则| www.550202.com-淮安体彩网-| www.654182.com-中国福利彩票第一位| www.735209.com-彩票冷热原理| www.805432.com-泊利彩票骗局揭秘| www.877102.com-彩票漏洞如何发现| www.962764.com-彩神1.98邀请码| 凤凰彩票www.5091y.com| www.cu87.com-哪个私彩网送彩金| www.tr15.com-香港供彩社区| www.62.bid-合创彩票平台| www.62ty.cc-福彩3d布衣天下二| www.0220.loan-时时彩专家预测| www.9240.xyz-乐彩站app官网| www.43794.com-体彩任选三奖金| www.86288.com-体彩大乐透机选| www.034979.com-坤彩-| www.132636.com-吉利彩票-| www.201717.cc-彩票购彩大厅| www.266797.com-玩快三为什么输钱| www.365885.cc-众彩网排三预测分析| www.447122.com-福彩女主持人| www.532255.com-彩票机去哪申请| www.632595.com-彩票的购买规则教学| www.697216.com-体彩排三历史开奖| www.768747.com-好彩网信誉怎么样| www.871674.com-苏州彩票领奖中心| www.937372.com-清乾隆各色釉彩大瓶| www.984600.com-炫彩粒子-| www.do03.com-彩票团队专业导师群| www.tk06.com-36o彩票下载安装| www.7kt.com-怎样买彩票中7百万| www.54xm.com-竞彩微信交流群| www.828.space-双彩网双彩论坛| www.4318.in-燕赵风彩好运三规则| www.9078.vip-中国福彩30选7| www.72792.cc-辽源彩票站出兑| www.028329.com-湖北快三开奖记录| www.097187.com-福彩小鱼图反正面| www.154665.com-福彩和体彩哪个赚钱| www.254929.com-北京5分时时彩| www.318794.com-江西体彩江西福彩网| www.379823.com-流光益彩的近义词| www.518939.com-分分彩网页版| www.615612.com-体彩七位数造假| www.680729.com-男子买彩票倾家荡产| www.750705.com-第一盛兴彩票| www.809038.com-竟彩足彩500比分| www.874703.com-七乐彩走势图代连线| www.985045.com-竞彩单关网易| www.cp7595.com-保定快三开奖走势图| www.kr83.com-91彩神网站-| www.zf20.com-5d全彩漫画大全| www.16pl.com-潢川彩票中奖| www.431.net-投彩网是真的吗| www.3468.xyz-网上售彩首批名单| www.8452.pw-新星彩xcaius| www.79881.cc-123彩图-| www.024638.com-中国福彩积分卡查询| www.086227.com-彩客彩票历史版本| www.137363.com-一分快三和值计划| www.200451.com-河南快三大小走势图| www.260638.com-快三和值9赔多少|