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.8435.pw-湖北彩钢围挡定做| www.151785.com-网赚快3彩票| www.31040.com-恶搞彩票中奖生成器| www.176309.com-网上开设快三网站| www.010656.com-分分彩是什么| www.126926.com-优优彩票-| www.272512.com-江苏快三走势图批| www.jh95.com-彩票历史开奖对比器| www.6791.cn-手机网易红彩官网| www.23231.cc-新彩网3b字谜区| www.383688.com-山西彩票20选8| www.509336.com-瑞彩祥8官方下载| www.581379.com-快三黑彩玩法介绍| www.r41.site-高频彩计划大全| www.20vl.com-怎样自选彩票号码| www.200454.com-河南福彩快三走| www.331486.com-福彩彩票走势图大全| www.556543.com-福彩几个号码才有奖| www.ya56.com-福利彩票今年几号买| www.449292.com-竟彩十四场投注| www.578802.com-福利彩票315| www.326.in-王成周研究彩票视频| www.619473.com-足彩亚盘看盘解盘| www.727470.com-大爆奖彩票下载| www.811212.com-中国福彩3d今天图| www.899639.cc-彩81彩票平台| www.971315.com-网上江苏体彩网首页| www.cp68.cc-快三自动投注| www.220971.com-中国彩票开奖大厅| www.970748.com-彩票历史开奖记录| www.4520.wang-体彩19065期| www.110270.com-七星彩长期二定包码| www.70869.com-728彩票登录| www.077182.com-彩色一体打印机| www.181920.com-北京快三跨度规律| www.506833.com-三彩家下载-| www.593187.com-彩虹t4-| www.555080.com-天津福彩快乐10分| www.974408.com-8号彩票一分快三| www.zb2.cc-快三一天开多少期| www.we65.com-甘肃快三最大遗漏| www.10dl.com-网络福彩被骗| www.20353.com-新浪足彩竞彩单场| www.37sc.cc-中国彩礼图-| www.831096.com-幸运快三大小怎么玩| www.539884.com-双色球彩吧网预测| www.461772.com-宇宙彩票-| www.0641.in-北京时时彩计划手机| www.896482.com-快三网站彩官网娱| www.144707.com-福彩3d狐不归预测| www.513009.com-大星彩票官网| 彩天下www.c5884.com| www.671356.com-六和彩资料全部| www.795501.com-新彩票走势图网| www.975587.com-彩票网站怎么盈利的| www.qr14.com-远洋竞猜型理财彩票| www.220073.com-1分钟开的彩票| www.588628.com-公益快三网赚靠谱吗| www.cm12.com-彩界过客-| www.220500.com-中彩啦app正规吗| www.158409.com-竞彩足球北单投注| www.292950.com-福彩3d钢炮预测| www.420622.com-福彩3d二幸运码| www.008326.com-19041胜负彩| www.vt82.com-惠民彩票-| www.971943.com-湖北有哪些彩票网| www.555423.com-新快三遗漏360| www.922703.com-福利彩票站营业时间| www.917387.com-彩虹吉他谱原版| www.919195.com-时时彩排名平台| www.ct68.com-体彩屋大发快3| www.419827.com-二十六天天好彩资料| www.580085.com-澳彩风情开奖记录| www.3557.wang-澳门电子送彩金| www.46966.com-彩票店转让可以过户| www.747100.com-彩票505-| www.380618.com-福彩双色球最大| www.568509.com-体彩排列三断组码| www.678430.com-足球彩票竞猜技巧| www.749033.com-凤凰乐彩下载| www.819790.com-星座选择彩票| www.884814.com-百度可以买彩票吗| www.838568.cc-丹麦28彩票计划| www.558462.com-彩铅风景简笔画| www.549736.com-玩足彩倾家荡产| www.585766.com-彩票七彩乐-| www.397797.com-彩票店主互联网售彩| www.sa79.com-正规彩票网投平台| www.213579.com-下彩彩票-| www.355431.com-彩友会网站是多少| www.97180.com-古建筑彩绘图案大门| www.449848.com-新加坡华彩票公司| www.dz1.com-快三输了怎么回本| www.17pc.com-湖北快三倍投技巧| www.952231.com-博众时时彩出售| www.fx3.com-江苏爱彩乐快三| www.wc87.com-今日内蒙古快三走势| www.148282.com-汇彩网登录网址| www.268143.com-我想买彩票总么买| www.739347.com-福彩3d豹子-| www.815120.com-台湾时时采彩开奖| www.93609.com-5分快三免费计划网| www.111909.com-注册送彩-| www.231883.com-彩飘-| www.720715.com-安卓版3彩票| www.432123.com-彩票开奖怎么算中奖| www.528434.com-中国体彩竞彩返点| www.313562.com-百胜快三平台| www.393221.com-时时彩全包法| www.494300.com-苹果下架博彩| www.pb16.com-河北快三买号技巧| www.767737.com-72期体彩试机号| www.ft02.com-百盈快三有没有技巧| www.0bt.com-足彩料码-| www.64ig.com-麒麟655彩票| www.40911.com-淘彩赢-| www.506504.com-江西福彩哪个台直播| www.631879.com-七彩视界可以投屏吗| www.731272.com-易彩堂注册-| www.815313.com-双红开彩是什么生肖| www.885444.com-山东云彩宝彩票下载| www.953906.com-天下彩票计划| 众发彩票www.779zf.com| www.517660.com-在国内做博彩代理| www.617339.com-排列三开机号家彩网| www.688820.cc-体彩足球直播360| www.758969.com-吉林快三庄家胜率| www.830809.com-6hzl彩票资料| www.891456.com-有完没完没看懂彩票| www.984405.com-彩票考业分析选号器| www.ks18.com-福彩三d今开奖| www.5234.me-赛马派彩及结果s1| www.882637.com-易彩堂不给提现| www.451178.com-杏耀彩票app| www.571507.com-哪里有快三直选| www.654093.com-今天江西快三走势图| www.4rl.com-福彩双色球彩民故事| www.501.site-七乐彩各省中奖结果| www.31708.com-足彩竞猜爱彩| www.96216.cc-体彩足球胜负开奖| www.092160.com-湖北快三1跨遗漏| www.165131.com-安徽体彩11号| www.84ym.com-大发彩票平台可靠吗| www.493983.com-808彩吧计划| www.330.cc-快3网络彩票诈骗| www.566713.com-大红英彩票网| www.036765.com-彩票榜可信吗| www.46255.com-丨68彩票官方网站| www.132675.com-好彩手机版下载| www.66fp.com-pk10彩票-| www.42fz.com-体彩足球怎么看中奖| www.291945.com-基诺彩票中奖规则| www.242422.com-福彩走势图专业版| www.096522.com-四川体彩网官方首页| www.7731.love-黑龙江福彩时时彩| www.45778.com-大中华彩票可靠吗| www.004682.com-湖北福利彩票开奖| www.982047.com-大信彩票app| www.528828.com-竞彩实体店怎么申请| www.975264.com-双色球彩票中奖图片| www.cai555.com-福建快三遗漏号| www.230117.com-享彩-| www.139653.com-大发时时彩怎么中奖| www.218079.com-广西十分彩开奖记录|