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天

知道了
百盈PK10 www.474655.com-双彩app-| www.612639.com-万彩吧彩票开奖预测| www.697371.com-七星彩网开奖结果| www.779566.com-七星彩票中奖号码| www.862544.com-今晚彩票开奖号| www.932815.com-彩票与概率-| www.991940.com-七乐彩玩法投注| www.gk9.com-大发快三计划网站| www.ng44.com-足彩竞彩分析| www.23km.com-新彩网3d汇总| www.0449.cn-彩票如何做计划| www.7267.biz-腾讯分分彩做号| www.25323.cc-彩铅素描画-| www.69771.cc-足彩14场开奖公告| www.054989.com-大连体彩站出租| www.137475.com-竞彩足球任九场| www.218078.com-亿彩下载-| www.292135.com-哪些高频彩是正规的| www.367500.com-猜大小彩票软件下载| www.465269.com-竞彩足球官方版下载| www.546087.com-福利彩票换纸视频| www.679659.com-魔方彩票苹果下载| www.761453.com-好彩妹照片-| www.877779.com-在海南如何做私彩| www.972443.com-彩铅画赵丽颖图片| www.qf.com-有彩金送的彩票| www.ok01.cc-哪个平台可以买彩票| www.48ey.com-中国体育彩票标志图| www.800.space-周易推算福彩3d| www.5381.xyz-福彩8app是什么| www.07668.cc-500时时彩平台| www.52655.com-天天好彩头-| www.96663.cc-福彩彩票种类| www.061318.com-足彩比分彩客网| www.205568.com-百胜快3彩票app| www.279104.com-丹麦快乐彩计划软件| www.375498.com-彩经网福彩走势图| www.499789.com-百乐彩彩票app| www.568163.com-天天中彩票提现问题| www.638801.com-余姚福利彩票中奖| www.749809.com-500万彩票正规不| www.819570.com-彩票的利弊-| www.888112.cc-95彩票网站-| www.978904.com-大发快3彩票规则| www.cp7178.com-江苏快三可靠吗| www.ms18.com-中彩网双色球旧版本| www.0fd.com-足球体彩的思路| www.56hl.com-星彩娱乐app下载| www.0025.mobi-多彩彩票官方版下载| www.7933.in-彩宝都有什么| www.26195.cc-为什么彩虹是弧形的| www.68723.cc-9购十分彩合法吗| www.041815.com-易彩2.0手机版| www.125081.com-买彩票从哪看出中奖| www.197034.com-乐和彩158-| www.266955.com-快三第一门户邀请码| www.368867.com-古典美人彩铅画图片| www.459302.com-出什么奖了七星彩| www.545555.com-三十选七七乐彩| www.643612.com-大千娱乐彩票可信吗| www.726532.com-菊花彩铅画图片大全| www.798037.com-体彩11选择5预测| www.871834.com-复式彩票多少钱| www.963379.com-彩铅颜色搭配口诀表| www.153223.com-3d开奖号中彩网| www.982125.com-577彩票骗局| www.ch67.com-黑彩快三漏洞| www.100834.com-qq群快三-| www.720683.com-福彩3d计算和差| www.795399.com-51彩神88-| www.866553.com-昨天晚上福彩开奖| www.928877.com-中福彩票众赢导师| www.985873.com-福彩3口专家杀码| www.cp975.cc-买快三神器-| www.kw22.com-天天快三靠谱吗| www.d75.top-海南体彩41| www.28nl.com-网易彩票关闭了吗| www.0909.me-凤凰彩票40088| www.6937.cn-七彩云南标志| www.16103.com-中彩免费娱乐社区| www.55639.cc-七星彩中奖列表| www.95892.com-足彩要多少钱| www.052779.com-福州体彩中心地址| www.168679.com-内蒙古快三网| www.258126.com-小米彩票app| www.327240.com-香港49码彩票网| www.390999.com-韩国五分彩怎么玩| www.525889.com-彩色3d打印-| www.600984.com-计划员带着买彩票| www.666977.com-乐彩vip网页版| www.733742.com-时时彩三分钟开奖| www.791155.com-福彩3d如何选好| www.852303.com-彩票七位数开奖结果| www.901074.com-福彩排列五走势图| www.963196.com-彩票人工神圣计划| 福彩www.16878j.com| www.dj82.cc-彩票的税率-| www.sx03.com-七乐彩要按顺序吗| www.14md.com-中彩网群英会开奖| www.90pz.cc-怎样看七星彩走势图| www.2033.cn-网上购彩正规平台| www.7036.cm-篮球竞彩胜负怎么买| www.16499.com-如何在竞彩中盈利| www.55157.com-棋牌送彩金88| www.94126.com-福彩今日新鲜事| www.045082.com-快三大小单双随机| www.230229.com-彩票99下载-| www.299414.com-3d彩吧藏机图| www.364569.com-世界杯彩票网禁售| www.440113.com-福彩中心在哪里镇江| www.522485.com-我乐时时彩在线计划| www.583022.com-彩票站走势图在哪买| www.637209.com-彩虹6号在哪里下载| www.788926.com-足彩单关赚钱技巧| www.844080.com-福彩变为国企会怎样| www.892535.com-懂彩帝app-| www.947569.com-彩票兑奖不接受采访| www.982653.com-福彩3d输惨了| www.pf41.com-幸运快三时时走势图| www.p42.club-谁能入侵黑彩服务器| www.37cg.com-新版一定牛彩票网| www.773.red-彩色画画图片大全| www.3882.biz-南国海南七星彩图规| www.8597.biz-分分钟中彩票软件| www.44953.com-500亿彩票网址| www.82958.cc-五百万彩票怎么下载| www.025795.com-包头福彩招聘| www.088474.com-中国福彩网址| www.139941.com-彩16安卓版本| www.206315.com-彩票端是什么意思| www.265272.com-中国福利彩票快三| www.394228.com-时时彩走势分析经验| www.504408.com-幸運快三-| www.562887.com-二八彩app下载| www.617979.com-体彩张驰-| www.675074.com-竞彩足球胜负评| www.736827.com-鸿运时时彩走势图| www.796454.com-彩票驿站快3| www.858459.com-中国湖北彩票网| www.909971.com-彩界联-| www.962900.com-江苏福彩投注站明细| 福彩www.2109m.com| www.ah69.com-七星彩图纸-| www.oc09.com-极速时时彩计划| www.2sg.com-华阳有彩票店转让吗| www.43zb.com-uc彩票是真的吗| www.99tv.cc-中彩票的方法| www.2155.net-买体彩还是买福彩好| www.6747.vip-新浪爱彩是正规的吗| www.09058.com-天美彩票是不是骗局| www.42641.com-5号彩票下载安装| www.78394.com-wps做彩票走势图| www.020420.com-86彩票人工计划网| www.076274.com-法国彩票-| www.128973.com-大发彩票一分钟一期| www.189141.com-快三内蒙古走势图| www.244060.com-数字3彩票吧| www.302601.com-亚洲彩票稳定吗| www.360407.com-大数据彩票分析| www.424477.com-福利彩票内部软件| www.509020.com-云彩彩票下载| www.562155.com-快三单双怎么玩稳定| www.607052.com-淘宝彩票手机版下载| www.657670.com-体彩巨奖兑付流程|