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.7781.me-福利彩票7乐彩玩法| www.60301.com-开彩票站赌黑彩| www.089238.com-彩6彩票苹果版本| www.176377.com-快三333后面| www.263930.com-彩票11选五开奖| www.399252.com-七星彩内部信息网| www.523126.com-手机版猜大小彩票| www.608045.com-免费白菜彩金| www.681307.com-十四彩怎么玩法| www.763928.com-福彩61生肖开奖| www.840188.com-pc福彩导师骗局| www.911561.com-家彩论坛手机版| www.974880.com-体彩18084期| www.cp664.cc-一分快三官网| www.pd20.com-今日福彩号码预测| www.11cv.com-中国足彩馆在线视频| www.92iq.com-彩票代打吧-| www.444369.com-彩票app素材| www.582125.com-彩彩票开奖结果查询| www.666764.com-e乐彩提现可信吗| www.763199.com-足球彩票什么软件买| www.835448.com-好彩三八解生肖| www.910371.com-彩99安卓客户端| www.975865.com-驻马店彩礼嫁妆| www.49188.cc-彩票红包雨聊天室| www.010896.com-搜狐彩票-| www.099070.com-江苏福利彩票结果| www.182788.com-快三和值表格| www.269118.com-a3彩票app-| www.443858.com-腐彩福彩-| www.548847.com-彩播平台直播下载| www.682005.com-足彩公众号-| www.776769.com-丹彩微贷-| www.899849.com-网络售彩何时恢复| www.975042.com-彩票0-| www.dp68.com-118彩票真黑| www.yc05.com-派彩快3走势图| www.36ad.com-趣九购彩票网站| www.2455.in-竞彩足球全包法| www.646531.com-太子彩票app苹果| www.947876.com-体育彩票星彩网| 500彩票网www.65707s.com| www.il25.com-澳客网足彩比分直播| www.o74.cc-送彩票营销-| www.81kg.com-彩神通代理会员贴吧| www.2726.pw-轩彩娱乐登录地址| www.298932.com-彩票体彩-| www.437300.cc-巴西安伯快三开奖| www.555977.com-体彩刮刮乐新票图片| www.639658.com-奖虫七星彩打印机| www.793499.com-胜彩彩票-| www.880932.com-凤凰彩票兼职| 万历彩票www.77114s.com| www.hy06.com-快三登录平台| www.f96.com-体彩3d图迷-| www.66rq.com-3k娱乐彩票平台| www.1048.cc-江苏快三坑吧| www.002213.com-彩票复式中奖计算器| www.092262.com-河南彩礼贵吗| www.219759.com-网上购彩平台| www.306062.com-福州福利彩票开店| www.387414.com-贴彩色钢化膜教程| www.604924.com-云彩宝苹果版| www.683904.com-福彩千古一胆| www.770614.com-宜宾七彩湖酒店| www.900481.com-武汉福彩站点转让| www.964273.com-彩票赛车怎么玩法| www.26ni.com-新万彩票吧开奖| www.8200.vip-安徽快三几点开始| www.43591.com-福利彩票旺彩| www.92651.com-哪里可以买竞彩足球| www.060399.com-彩53彩票领导者| www.134893.com-好彩印第安铁盒| www.216568.com-彩票带单老师| www.293365.cc-智慧彩app快3| www.369209.com-尼彩手机好么| www.474053.com-无锡市福彩兑奖地址| www.562620.com-彩界独胆王-| www.635884.com-彩票税收计算| www.828804.com-218永信彩票| www.902623.com-玩黑彩有人赚了| www.970764.com-买彩票是否能中大奖| www.ck01.com-怎么注册江西快三| www.wg47.com-贵州快三选快三公式| www.54aw.com-彩票得主危险吗| www.1582.bid-彩票缩水专家苹果版| www.30876.com-8k彩票app主页| www.77220.cc-体育彩票助手软件| www.035120.com-彩票亏的倾家荡产| www.167213.com-快三网上投注平台| www.276044.com-北京快三彩票| www.382098.com-男子借钱买彩票| www.526666.com-重庆时时彩稳输规律| www.623757.com-彩票三期计划| www.759512.com-重庆时时彩视频开奖| www.875723.com-重庆时彩时彩代理图| www.979534.com-福彩快十玩法介绍| www.ce27.com-有人买快三亏钱吗| www.yn46.com-马来西亚乐和彩合| www.29qo.com-彩票网站推广联盟| www.769.net-赢彩王专业版账号| www.4163.cn-彩虹一7-| www.9870.online头务彩多多-| www.133458.com-福彩3d常跟版| www.212757.com-亚洲彩票都谁被骗过| www.292049.com-江苏福彩快三彩经网| www.602537.com-体育彩票店盈利情况| www.765924.com-淅江福彩6十1| www.872098.com-福彩三弟跨度走势| www.975439.com-江苏快三作弊器价格| www.kj1.com-湖北福彩开奖公告| www.wt17.com-快三号码速查表| www.19oq.com-天天竞猜足球彩票| www.0521.net-金凤凰彩票平台| www.8993.biz-凤凰网官网彩票| www.yp88.cc-陕西福彩网-| www.65af.com-彩中网开奖结果| www.2213.top-福彩3d断组天气网| www.8776.org-广东福彩官方网| www.27012.com-微信华彩彩票| www.67853.cc-买足球彩票是赌博吗| www.097519.com-时事彩计划软件| www.149062.com-下载彩乐彩票网| www.262004.com-福彩开奖双色球结果| www.360057.com-海南七星彩是私彩吗| www.424876.com-大家赢彩票网正规吗| www.506936.com-百度扫彩票-| www.563720.com-中彩彩票快3网址| www.626811.com-欧洲彩票开奖号码| www.690202.com-新浪爱彩官网合法吗| www.764451.com-808福彩app-| www.936720.com-麒麟彩票骗局| www.985107.com-竞彩足球规律| www.xi4.com-今天福彩正版藏机图| www.pp49.cc-p3开机号家彩网| www.6mi.com-博雅彩票网站| www.57su.com-乐米彩票中大奖后| www.770.com-双色球彩票预测专家| www.4332.com-体彩排五和值走势图| www.9129.loan-近10期七乐彩开奖| www.001185.com-神马青蛙彩票| www.062133.com-福彩三d天庚图| www.143311.com-好彩网登录网址| www.211352.com-东北人玩彩独胆| www.273961.cc-幸运时时彩网址| www.369852.com-中国福彩123| www.452212.com-云南福彩20选八| www.533191.com-多格印象5d彩印机| www.630908.com-好彩欧盟-| www.691793.com-本月足彩对阵表| www.760902.com-在线计划时时彩| www.860548.com-彩票奖金二等奖| www.917090.com-亚洲会彩票正规吗| www.970276.com-凤凰彩票玩的人多吗| www.cp7968.com-快3福彩网app| www.ks77.cc-百分之百彩票官方版| www.zi90.com-彩票app破解软件| www.15km.com-结婚前因为彩礼分手| www.330.cm-快三彩票是不是骗局| www.3144.cc-体彩电话-| www.8037.org-飞乐鸟水彩教程| www.21972.cc-约彩365官方下载| www.58158.com-分分彩如何盈利| www.038740.com-彩票试机号查询全国|