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天

知道了
102彩票 www.1mm.cc-河北省彩票兑奖在哪| www.34086.com-排列三乐彩吧论坛| www.024710.com-竞彩冷门大奖| www.979694.com-彩票导航天下特彩吧| www.pt63.com-彩经网3d杀号定胆| www.50lg.com-七彩奖开奖走势图| www.1211.net-彩票中2亿-| www.078050.com-中国彩票作假视频| www.200053.cc-今天福彩出奖号| www.139621.com-彩票38彩票领导者| www.268107.com-福彩缩水软件下载| www.36926.cc-江苏快三数据统计| www.015640.com-七星彩票开奖表| www.if1.cc-褔利彩票开奖号码| www.a38.com-重庆时时彩走势技巧| www.63yw.com-福彩3d通选和包选| www.1909.me-加盟机器人福利彩票| www.8600.in-彩31网官方网址| www.941198.com-彩票赚流水钱| www.cp743.com-快三网上-| www.tz45.com-彩票屠龙法-| www.16nu.com-楚星彩票ap-| www.0722.cn-最新七彩奖-| www.617703.com-中发彩票激请码| www.737920.com-哈哈时时彩电脑版| www.848806.com-返奖率高的彩票网站| www.930291.com-吉林快三最新遗漏| www.984809.com-买彩为什么会连输| www.ro46.com-盈彩彩票正规吗| www.492835.com-985代理彩票| www.607956.com-怎样买足彩稳赢| www.711995.com-时时彩能长期盈利吗| www.50115.com-彩软科技是真的么| www.030045.com-海南四码彩票兑奖| www.121426.com-彩芽的好奇心| www.aw3.com-湖北今天快三推荐| www.ts70.com-合买彩票网-| www.18hz.com-好彩学院双色球| www.1128.me-竞彩足比分-| www.7635.me-荣耀彩票网页| www.922376.com-吉林快三预测单双| www.cai8585.com彩神ii-| www.rv83.com-中国彩票官网代理| www.29lq.com-重庆时时彩胆码计算| www.0239.cc-速赢彩票app下载| www.6585.top-生日彩票号码生成器| www.597337.com-网络彩票黑吃黑| www.681079.com-彩经彩票软件| www.770071.com-七彩云南普洱茶| www.su94.com-ios版彩票33| www.07mp.com-哪种彩票返奖率最高| www.730090.com-六福彩票平台| www.813504.com-福彩3d牛材网首页| www.892777.com-丘小君成化珐琅彩| www.966130.com-福彩3的中奖结果| www.hq.com-福利彩票快3下载| www.qc99.com-鸿彩快三彩票推荐码| www.x62.pw-快三下期-| www.73zh.com-3d黑彩网专家预测| www.1827.xyz-江苏省快三开奖走势| www.15484.com-6加1彩票开奖时间| www.63765.com-竞彩nba投注比例| www.060562.com-下载彩53-| www.144348.com-足彩猜胜负中奖规则| www.969989.com-南方双彩网app| www.nr00.com-极速快三计划官网| www.470366.com-有没有正规的足彩| www.ur42.com-谁有鸿彩网址| www.17cq.cc-尼彩手机电池| www.875.red-少儿彩铅画作品大全| www.5700.vip-卖彩票的地方| www.539058.com-乐盈彩票赚钱吗| www.6289.cc-黑苍蝇3d彩报图| www.x05.cn-彩票能挣钱的软件| www.138.site-中国移动福彩| www.933574.com-彩票代理平台的背后| www.cp852.com-快三单双大小投注| www.sr09.com-中国体育彩票竞彩店| www.35oc.com-彩宝贝向东专栏| www.1009.net-周一彩票-| www.8831.vip-众彩网彩票专家预测| www.55270.com-快3彩票手机软件| www.001508.com-八亿彩可靠吗| www.8yy.cc-体彩键盘修改号键| www.440946.com-pc28彩迅-| www.034008.com-博彩程序源码| www.175878.com-快三开挂作弊下载| www.264597.com-彩票新规定-| www.9fy.cc-体彩5位数怎么买| www.72ql.com-机选彩票软件下载| www.1506.vip-彩虹的约定教案流程| www.514002.com-彩钢可以用几年| www.588281.com-七星彩最准的头尾| www.87989.com-新加坡十分彩| www.985784.com-湖北快三奖结果| www.fx1.com-哪个彩票是6位数| www.qd04.com-彩票要分-| www.08bw.com-亿彩票app下载| www.82bw.com-七星彩开奖前30期| www.378259.com-幸运彩河南福彩| www.563828.com-福彩3d福星高照| www.645435.com-山东七乐彩中奖规则| www.799447.com-世界杯彩票怎么看| www.rn97.com-七星彩票app下载| www.410516.com-唯彩会买彩票| www.02nt.com-网罗爱彩双色球| www.447361.com-福彩三d晒时票| www.f65.pw-华人彩票可信吗| www.37wj.com-星座彩票幸运号| www.5881.com-彩神每日预测金胆| www.522122.com-0165彩票ios| www.591946.com-三弟图库福彩| www.662830.com-国彩投资-| www.736444.com-福建省快三-| www.806822.com-足彩入门书籍| www.872276.com-旺彩app苹果版| www.wl34.cc-豪彩网址-| www.16tq.com-福彩3d连线报| www.90qr.com-买彩票中大奖后危险| www.2705.cn-500彩票是真的吗| www.8339.com-金师彩票一秒开| www.30696.com-3d南方双彩网预测| www.73719.cc-河内二分彩-| www.023447.com-彩票的投注方法| www.kp08.com-什么彩票软件最好| www.205717.com-彩票快三骗局揭秘| www.934406.com-星空彩票手机app| www.984833.com-彩8彩票c85-| www.11eu.com-黄金时时彩计划王| www.78em.com-银川彩票659万| www.376060.com-安徽体彩在哪里兑奖| www.25ja.com-华彩什么意思| www.401.tv-惠民彩票兼职| www.3753.pw-开开心心七星彩网| www.500511.cc-复式彩票号码怎么看| www.567895.cc-体彩几个号码| www.45jl.com-吉林市黑彩群| www.316322.com-体彩竞彩申请名额| www.387366.cc-8p彩膜-| www.541515.com-彩经网下载安装| www.gn93.com-手机端福彩快3网| www.567186.com-657彩票下载| www.621678.com-福彩三d中奖事| www.733814.com-福彩水果农场| www.802372.com-天津福彩在哪兑奖| www.873646.com-大盘娱城彩票| www.984342.com-重庆时时彩诈骗套路| www.lc.cc-极速快三立即开奖| www.lu65.com-网上玩快三会有事吗| www.183736.com-175oo乐彩网| www.917032.com-彩虹六号围攻| www.976571.com-河南西平结婚彩礼| 中彩网www.91233t.com| www.072750.com-中国彩票中奖纪录| www.133565.com-河南天成彩铝| www.203809.com-体彩5d开奖结果| www.928499.com-今晚福彩快开奖结果| www.981350.com-一分快三和值推荐| 幸运彩票www.444215.com| www.cz95.com-彩神争ⅷ-| www.se83.com-福彩网快3合法吗| www.94kh.com-体育彩票哪种好一点| www.2310.org-七彩捞腌菜官方下载| www.7315.cn-大师彩铅插画|