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.yc1.com-黑彩票平台-| www.00to.com-天上彩虹像什么| www.80re.com-广州双色球彩票| www.5278.space-香港赛马会派彩结果| www.328559.com-彩票天吉网-| www.488929.com-乐彩购彩大厅| www.455496.com-彩票c16二维码| www.780954.com-竞彩足球串关玩法| www.31855.com-快发彩票下载| www.049101.com-福彩3d东北双胆网| www.190296.com-惠民彩票一分快3| www.29077.cc-万发彩票-| 500彩票www.786587.com| www.va94.com-彩吧图库331期| www.45mj.com-彩虹6号百科| www.0599.link-天天爱彩票可靠吗| www.ge30.com-彩迷葫芦第-| www.15zt.com-彩发发官网版下载| www.2799.me-百事可乐彩票网| www.9779.cm-七星彩专家上官燕| www.50238.com-七星彩808彩票| www.011165.com-搜狐彩票双色球预测| www.102250.com-台湾乐透彩今晚| www.188678.cc-五分快三屠龙是什么| www.291001.com-体育彩票大乐透走势| www.365893.com-彩铅渐变色怎么涂| www.484299.com-彩票后二倍数怎么算| www.581806.com-天天乐彩票是骗局吗| www.573784.com-吉林快三是什么彩票| www.w22.top-福彩3d两天计划王| www.414.com-彩票客服工作怎么样| www.68545.com-江苏福彩三d开奖| www.141181.com-老猫看彩快讯77期| www.238061.com-发彩网下载到手机| www.333853.com-买体育彩票的常识| www.448175.com-华人国际时时彩骗局| www.571555.com-新版中免蓝好彩| www.678457.com-福彩3d专家总汇| www.805295.com-七乐彩奖金多少钱啊| www.896703.com-华夏彩票平台官网| www.968345.com-谁有时时彩的微信群| 豪彩VIPwww.808913.com| www.qq95.cc-鑫彩网彩票-| www.22jt.com-福彩内部员工电话| www.hh65.com-广东体彩中心| www.75do.com-好彩运彩票-| www.5790.vip-609彩票网-| www.28985.cc-彩色激光打印机| www.74435.com-彩票app验证码| www.055165.com-机选彩票号-| www.173786.com-博彩app-| www.267935.com-随州论坛快三| www.022630.com-体彩开机号和试机号| www.145641.com-百宝世嘉彩票走| www.655630.com-彩票中奖软件生成| www.72941.com-h广西体育彩票网| www.137065.com-七彩科技会员中心| www.675574.cc-江苏快三有多少年了| www.803957.com-湖北快三十大技巧| www.893332.com-彩票筛选安卓| www.955884.com-彩票差点中奖的心态| 易彩集团www.25688c.com| www.lw92.com-快三高手下载| www.v78.club-体彩五字术语| www.64wh.com-乜星彩结果-| www.1600.cm-腾讯分分彩四星破解| www.21776.cc-大乐在线机选彩乐乐| 彩乐乐www.cll168.com| www.ms73.com-彩店宝彩票-| www.76ca.com-湖北快三71-| www.878725.com-江西体育彩票中心| www.956359.com-竟彩足球彩客网比分| www.mt10.com-20选5走势图福彩| www.38ib.com-彩票王马洪平| www.ag32.cc-彩票预测-| www.s08.top-买彩票app那个好| www.73kk.com-龙瞎炫彩皮肤| www.0529.org-乐亿彩票app下载| www.226586.com-三分彩-| www.374198.com-体育彩票大奖时间| www.490769.com-天猫国际彩票| www.562263.com-上海基诺彩票奖金| www.755130.com-金龙彩票app| www.85bh.com-永恒之剑炫彩| www.947587.com-彩票诈骗举报电话| www.973830.com-三分快三如何破解| www.2009.cc-体彩组选3开奖| www.13144.cc-香港彩富网-| www.64435.com-京彩生活-| www.060755.com-彩票走势图分析制作| www.138192.com-福彩3d解码神器| www.211852.com-内蒙彩票十一选五| www.291338.com-彩神viii-| www.356954.com-对彩票的认知| www.432246.com-88在线彩票平台| www.520409.com-有钱人买彩票发财| www.582433.com-e77乐彩注册登录| www.650404.com-时时彩一帆风顺打法| www.767499.com-六令彩旺甬网| www.833953.com-黄金8彩票破解方法| www.915772.com-1号彩票app-| www.818221.com-腾讯分分彩开讲结果| www.897744.com-福彩专业彩吧| www.964346.com-达州福彩-| www.cp27.com-彩71-| www.mo11.com-免费彩金app| www.305705.com-又想买彩票了| www.397103.com-赫斯缇雅全彩本子| www.667533.com-彩球滑梯类似游戏| www.739026.com-一定牛吉林快三遗漏| www.804949.com-3d彩票选号技巧| www.874399.com-长沙福彩网-| www.955303.com-80彩票app下载| 818合彩www.www.5666hc.com| www.6721.org-专业彩色打印机出租| www.44ka.com-代做彩票流量| www.2661.com-便民工作室彩吧| www.9688.live-彩票网站哪里做得好| www.639523.com-体彩怎么申请竞猜| www.782885.com-易购彩合法吗| www.855557.com-福彩3d徐柯-| www.916907.com-天下彩票一-| www.971497.com-彩88彩票专家| 大赢家彩票平台www.507281.com| www.iq56.com-宁夏快三开奖走试图| www.18fb.com-彩久彩票app下载| www.0467.pw-竞彩猜比分-| www.8484.in-快三怎么下载啊| www.36359.cc-彩票大小单双走势图| www.86513.com-彩名堂官方网站| www.038823.com-七星彩开奖什么奖| www.131679.com-河南体彩中心建行| www.222584.com-765彩票-| www.298844.com-专家推荐快三号码| www.373330.com-500彩票咋样| www.644970.com-35彩票网址-| www.702244.com-足彩258竞彩网| www.766189.com-风发彩票qq-| www.824920.com-福彩3d和值跨度| www.882484.com-高频彩种哪家好平台| www.954984.com-黑彩什么意思| www.994710.com-好彩客1055-| www.ni7.cc-人人中彩票苹果下载| www.nd36.com-彩票开奖11选五| www.q25.net-福彩3d天中图库| www.451544.com-幸运分分彩是什么| www.633581.com-244大众彩票| www.731650.com-百姓彩票返钱快吗| www.794600.com-吉林快三内部人员| www.76987.cc-福彩新浪彩票| www.308577.com-一分钟快三怎么倍投| www.391892.com-星耀彩票平台合法吗| www.515875.com-金彩网福彩网| www.e76.org-彩78彩票-| www.202.com-彩神软件破解版下载| www.4074.cc-乐彩33登陆-| www.02916.com-体育彩票3亿| www.850519.com-重庆时时彩生肖| www.980647.com-易彩乐下载-| www.2110.in-彩虹六号围攻视频| www.8278.top-恒彩2-| www.592839.com-彩虹5-| www.722217.com-单个彩铅画图片大全| www.812207.com-竞彩平台哪个好|