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.607438.com-福彩3d三强会员版| www.7030.biz-7乐彩规则-| www.99vw.com-3g购彩网-| www.rw64.com-快三选胆码技巧| www.831532.com-2018竞彩销量| www.844813.com-发福利彩票的意义| www.958435.com-七星彩1注赔多少| www.200956.com-七星彩今天预测号| www.18806.cc-彩票816软件| www.147920.com-234彩票苹果| www.231260.com-购彩大厅下载安装| www.314039.com-体彩兑奖流程| www.410071.com-圣哲世界杯竞彩| www.889650.com-七乐彩开奖往期回顾| www.993155.com-彩票计划赚钱| www.ef60.com-百胜彩票官网| www.05ij.com-彩铅颜色叠加出绿色| www.962.tv-体彩七星彩投注| www.23319.cc-盈彩彩票官方网站| www.85576.cc-彩票对刷流水| www.136751.com-易彩堂主页599t| www.527.net-喝彩中华的评委| www.55297.com-时时彩怎么打才稳| www.82281.cc-网络彩票骗局报警| www.320969.com-一1福体彩开奖号码| www.766997.com-福彩中奖号是多少| 500彩票www.aa3126.com| www.326631.com-怎么查彩票站| www.456072.com-欢迎来到旺彩游戏| www.579746.com-44彩票黑网-| www.026476.com-一定牛体彩应用| www.33751.com-廣東彩票-| www.208442.com-博彩套利技巧| www.355974.com-龍之彩下载-| www.q23.cc-江苏快三二不同推荐| www.552197.com-火的体育彩票| www.28kz.com-全民星彩app| www.7890.cm-500彩网首页| www.36250.com-彩友吧预测专区总汇| www.335009.com-福彩快三如何看规律| www.856018.com-彩站宝网页版登录| www.037765.com-爱彩乐开奖走势图| www.72314.com-精彩视频免费观看| www.vk68.com-彩运福彩快3| www.742654.com-好运彩彩票下载| www.cq20.com-吉林快三追号计划| www.63sk.com-彩票最新-| www.8669.cn-彩宝贝个位杀号3d| www.03766.com-辽宁省彩票发行中心| www.277302.com-彩钢围挡使用期| www.352927.com-668时时彩彩| www.7866.loan-胜负彩心得-| www.277437.com-彩票规律破解公式| www.576908.com-体彩7星彩怎么玩的| www.406105.com-山东彩礼多少钱| www.576714.com-吉林快三走跨度振幅| www.74ei.com-万彩吧真人预测| www.8231.xyz-互娱彩票官网| www.52816.cc-好彩投专业购彩平台| www.891709.com-五分彩平台app| www.75cv.com-旋子彩画手绘图集| www.57987.com-破解彩票概率组合| www.038323.com-彩25彩票-| www.454084.com-乐彩国际平台官网| www.607639.com-北京多乐彩怎么投| www.749033.com-凤凰乐彩下载| www.872365.com-福彩5等奖多少钱| www.cai77.cc-快三开奖湖北| www.xy70.com-中澳彩票app| www.6586.com-彩票白菜网站大全| www.680778.com-怎么戒掉网上买彩票| www.853110.com-彩票春节-| www.qg40.com-八亿彩官网下载| www.50lg.com-七彩奖开奖走势图| www.7007.xyz-篮球胜负彩怎么玩| www.900104.com-288彩-| www.952561.com-丰彩彩票网站| www.406768.cc-七星彩五百期走势图| www.4987.biz-qq彩色昵称代码| www.586101.com-七乐彩历史同期查询| www.827675.com-千禧彩票备用网址| www.796152.cc-爱看彩彩票论坛| www.114688.com-快三守号260计划| www.326975.com-浙江快乐彩助手下载| www.574035.com-世纪星彩票-| www.791372.com-电竞彩票下注app| www.963410.com-比较大的彩票平台| www.22pq.com-福彩中心几点上班| 来运彩票www.1111y.cc| www.019322.com-贵州省体彩中心在哪| www.fk66.com-五分快三内部计划| www.091255.com-海南省七星彩规律图| www.399185.com-彩票程序排名前十名| www.41by.com-福彩体彩休市| www.540009.com-休闲快三醉人的花香| www.561053.com-七乐彩助手-| www.482273.com-五位数彩票开奖| www.1005.wang-迅盈彩票app| www.023882.com-开彩网api-| www.201184.com-七星彩十大专家预测| www.334446.com-皇都彩票是安全的吗| www.452356.com-分分彩稳定玩法| www.576342.com-嬴钱彩是什么| www.657567.com-大乐透前区彩票杀号| www.939918.com-彩神争霸大发快3| www.61342.com-够力七星彩所有版本| www.69987.cc-盛世彩票登录网站| www.083575.com-买哪一种彩票好呢| www.186363.com-快三彩票怎么看走势| www.260091.com-288彩票被骗| www.157974.com-竞彩加奖和外围对冲| www.298173.com-河南体彩中心电话| www.116884.com-体彩试机号及金码| www.442046.com-网易红彩专家入住| www.82ta.com-55215中国彩吧| www.458585.com-快三34期开奖结果| www.561592.com-连中彩票世界杯| www.637885.com-七星彩与排列五表| www.719646.com-今天快乐彩开奖号码| www.385959.com-彩票平台源码在哪| www.gv88.com-易彩网-| 500彩票www.50051s.com| www.288350.com-爱彩乐如何注册| www.410781.com-彩票平台制作在哪找| www.546799.com-爱乐彩票有漏洞吗| www.662272.com-彩乐乐网公告| www.831527.com-竞彩销量大降| www.940258.com-体育彩票店铺转让| www.28897.com-彩票开奖走势图| www.mh0.cc-快三吉林走势图解| www.393075.com-星空彩铅画图片大全| www.562597.com-豪彩彩票下载安装| www.654703.com-彩家园计划聊天室| www.794108.com-腾讯1分彩-| www.958826.com-春节后福彩几号开售| www.37.cn-快三半顺号技巧| www.37617.cc-8888彩票登录| www.26188.com-彩虹周杰伦歌曲| www.hr.com-足球竞彩网首页| www.mw12.com-天天时彩助手手机版| www.684652.com-新彩吧福彩图谜| www.30688.com-新浪爱彩大乐透| www.76884.com-老彩民快三-| www.040918.com-基诺型彩票的漏洞| www.112998.com-广州鸣彩艺术怎么样| www.352777.com-仲博是黑彩吗可靠吗| www.32ww.cc-彩票牛彩网迷图3d| www.2011.net-恒发彩票网站| www.110386.com-帝皇彩票app官网| www.186022.com-湖北快三数据| www.248878.com-老快三开奖统计图表| www.322831.com-逆袭彩票软件安卓版| www.192366.com-甘肃快3彩经网| www.280750.com-时时彩超级精准计划| www.r34.website体育彩票排5| www.226150.com-彩票带单是真的吗| www.177807.com-上海福彩时时乐玩法| www.308848.com-彩票大乐透开奖时间| www.509596.com-ee彩是真的吗| www.775440.com-选5型彩票聪明组合| 中华彩票www.9149b.com| www.47po.com-刚力彩芽日本| www.605233.com-彩色苹果笔记本| www.732693.com-南京市体彩管理中心|