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.lc87.com-彩票庄家会输钱吗| www.293639.com-东方福彩6+1| www.893995.com-彩63下载-| www.976515.com-中国各地彩礼嫁妆| www.xv.com-广西快三几点结束| www.57262.cc-锋彩直播ios版| www.01626.cc-售彩app官网注册| www.580635.com-七是彩开奖-| www.770461.com-黑彩做庄能赚钱吗| www.ai62.com-廉江好彩哥规律| www.1wy.com-银河彩票平台搭建| www.248739.com-江苏福彩彩票| www.84rm.com-仟彩摸吧电话| www.3516.biz-网易彩票网没圈子了| www.45614.com-五福福彩网址| www.iq90.com-彩乐网app下载| www.625528.com-怎样开网络彩票| www.770539.com-足球竞彩软件哪个好| www.885110.com-福利彩票3d两元网| 乐彩赢www.0014s.com| www.159195.com-彩票55是黑平台| www.254412.com-亚博彩票下载安装| www.337171.com-快三会不会赔钱| www.217802.com-内蒙古时时彩彩开奖| www.651368.com-3分钟快彩怎么玩| www.931300.com-幸运魔方彩票| www.tr35.com-福彩快三江苏| www.42rw.com-彩钢瓦使用寿命| www.5610.cm-福利彩票充值卡| www.27664.com-好彩客下载app| www.796604.com-博众彩意思-| www.1925.cn-河南彩票官网| www.277033.com-高频彩票坑了多少人| www.697358.com-全民彩票代玩| www.257399.com-最可靠的黑彩票网站| www.371155.com-彩铅樱花树图片| www.549716.com-网上禁止买足彩| www.903611.com-购彩通苹果系统| www.jr2.com-河南快三今日遗漏| www.zy06.com-安彻快三跨度走势图| www.974465.com-天牛3d彩票网| www.8522.net-彩票合质定义| www.34738.com-福彩三d今晚开奖号| www.sx14.com-七星彩几点钟开奖| www.667769.com-中国福利彩票授权| www.781824.com-会员注册国彩网| www.sz06.com-彩票有哪些种类| www.13067.com-中国福利彩3d| www.r12.top-广西福利彩开奖结果| www.270077.com-749彩票安卓版| www.885917.com-内蒙福利彩票站利润| www.50702.com-彩票反水啥意| www.877717.com-彩票改革-| www.wd08.com-辽宁快三群-| www.276601.com-彩之源彩票首页| www.399311.com-买彩票守号几十年| www.536026.com-什么彩票只买四位数| www.617799.com-彩礼什么时候给合适| www.723785.com-昆山双色球彩票大奖| www.796648.com-广西经典快三开奖号| www.877888.cc-彩票2元网3d走势| www.951152.com-中彩网投注-| 奔驰彩票www.750966.com| www.264977.com-大发快三导师| www.676008.com-七星彩票图表| www.761122.com-彩礼钱应该给父母吗| www.840025.com-竞彩篮球500网| www.907608.com-褔彩开奖直播| www.969229.com-中神彩下载-| 网易彩票www.501203.com| www.52156.cc-快三的中奖排列组合| www.96304.com-福彩用途-| www.062213.com-万彩彩票正规吗| www.428387.com-国外足球竞彩网站| www.533616.com-体彩三d开奖时间| www.638497.com-苹果色彩图片| www.699207.com-彩民村心水论| www.766851.com-28彩票网app| www.828273.com-彩票双色球复式机选| www.906614.com-我要买彩票双色球| www.963474.com-网购足球彩票| 网易彩票www.36788x.com| www.32222.com-各种彩票开奖时间| www.336960.com-网易世界杯彩票| www.456021.com-彩票至尊宝典手机版| www.590113.com-广州体彩兑奖中心| www.733847.com-彩票预选走势图软件| www.43ip.com-竞彩足球进球游戏| www.033744.com-易彩彩票胆拖| www.260748.com-爱农驿站彩票| www.360390.com-足彩买100赢多少| www.503375.com-鸿鑫娱乐时时彩| www.617362.com-快三开奖视频| www.352338.com-一出好戏的彩票号码| www.444851.com-彩票中奖要扣多少税| www.660935.com-彩票白菜发布论坛| www.760305.com-快3彩票电视走势图| www.875215.com-体彩排五开奖综合图| www.960486.com-下载可宝彩票| 百姓彩票www.bxcp3.com| www.ky67.com-9彩彩票下载安装| www.rv69.com-最新彩票指南报纸| www.37ql.com-快三定1胆方法| www.990.in-六位数字的彩票| www.7651.xyz-新宝3彩票平台下载| www.052402.com-大发快三开-| www.135203.com-彩票导航重庆时时彩| www.083692.com-微信合买彩票揭秘| www.96156.cc-足彩低赔什么意思| www.865060.com-龙凤彩票-| www.44148.cc-58福彩靠谱吗| www.066095.com-体育彩票倍率| www.289572.com-福利彩票主任被查| www.811811.com-新昌双彩乡-| www.294738.com-福彩三毛图库大全| www.596058.com-彩票法律法规赊账| www.767375.com-一分彩怎么看号| www.lz.cc-体育足彩竞彩网| www.12hy.com-彩色的翅膀背景资料| www.274910.com-时时彩官方网站公告| www.259007.com-彩票幸运选号| www.474556.com-福彩3d博恩说彩| www.728502.com-大连市体彩中心电话| www.932660.com-2118彩票-| www.42sy.com-梦到刮彩票中大奖| www.157270.com-v8彩票安卓下载| www.447415.com-体彩大吉大利代码| www.921210.com-体彩跨度表-| www.15bi.com-天天彩票qq登陆| www.7927.cc-博彩彩票安卓版| www.175273.com-代理快三刷流水| www.126418.com-湖北体彩假球| www.123009.com-美国彩虹计划骗局| www.336333.cc-福利彩票中心开机号| www.275615.com-天津市彩历史| www.ie00.com-中国体彩网官方下载| www.75ul.com-竞彩足球下载哪个| www.249511.com-7彩网下载地址| www.635544.com-博彩公司看哪家| www.458855.com-足彩竞猜贴吧| www.815163.com-燕赵风彩新闻| www.3456.cn-白菜送彩金-| www.094507.com-下载37彩票-| www.963564.com-被彩票托骗了| www.4169.com-七彩云电子商务| www.nc60.com-鸿运彩票是骗人的嘛| www.388770.com-腾讯分分彩定位胆0| www.3310.biz-竞彩足球分折网易| www.29432.com-福星彩票app下载| www.013681.com-点击彩骗局-| www.212193.com-中国体彩上海快三| www.75541.com-国外365彩票网站| www.668.live-360彩票网首页| www.21519.com-湖北福彩短信投注集| www.848785.com-时时彩平台刷彩金| www.lu45.com-时时彩软件下载| www.291928.com-甘肃快三号码推荐| 600万彩票www.187517.com| www.13688.cc-体彩中几个号才有奖| www.022986.com-福彩3d太作假了| www.884653.com-研究彩票趋势| www.85635.cc-牛彩网3dp3-| www.fy01.cc-彩神计划-| www.964970.com-新浪福彩开奖视频|