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.168156.com-868彩票-| www.414580.com-彩之云物业怎么样| www.562392.com-高频彩票有盈利的吗| www.355592.com-刘军玩彩课程| www.467499.com-黑龙江省福彩快乐| www.561668.com-一分快三走势观察| www.5969.org-足彩关小刀最新推荐| www.12992.cc-中体彩唯一官网| www.3500.com-广东体育彩十一选五| www.204476.com-今日福体彩开奖结果| 亿彩堂www.87668j.com| www.951745.com-彩神彩票官网| www.025905.com-七乐彩开奖今日开奖| www.cp5777.com-31彩票-| www.569112.com-福彩双色球后区全买| www.684662.com-大赢家购彩网站| www.784233.com-众彩物流批发市场| www.882888.cc-彩票中奖诈骗| www.984280.com-二分彩规律技巧| www.hp46.com-上海快三有几种玩法| www.01ac.com-高频彩投注平台| www.511274.com-彩票余数技巧| www.616710.com-体育彩票过期时间| www.fw03.com-快三猜和值大小技巧| www.721325.com-竞彩霸主双色球预测| www.327699.com-昨晚的福利彩票号码| www.088799.com-重庆市彩55期| www.207456.com-魔方彩票app| www.647400.com-智胜彩票app下载| www.760671.com-三分时时彩分析软件| www.309361.com-体彩排列三玩法介绍| www.661775.com-外围足彩能挣钱吗| www.806836.com-香港最大的彩票网| www.68gb.com-聚鑫乐彩怎么充值| www.231012.com-河南彩票报金手指| www.6085.vip-体彩违法事件| www.872218.com-下载826购彩| www.397854.com-昆明彩票店转让| www.539113.com-重庆时时彩各种玩法| www.643364.com-广西快三跨度漏洞| www.550416.com-李承红休闲快三| www.108319.com-速盈彩怎么下载| www.717335.com-彩铅怎么画阴影| www.315307.com-七彩阳光音乐| www.454444.com-一分时时彩人工计划| www.97876.cc-皇家彩世界-| www.027117.com-广西快三计划app| www.381877.com-足彩19035-| www.30002.com-体彩网官网-| www.008038.com-七乐彩各期中奖号码| www.239835.com-台北快三一分钟一期| www.398192.com-七星彩历史全部开奖| www.033702.com-破解腾讯分分彩漏洞| www.132987.com-竞彩2串1什么意思| www.230560.com-彩运8是正规平台吗| www.325823.com-彩经网时时彩走势| www.83772.com-中彩票捐钱-| www.008850.com-美国28彩票官网| www.539600.com-釉上彩建盏-| www.475068.com-星期五彩票什么开奖| www.598606.com-七星彩票选几个号码| www.662560.com-国彩在哪里玩| www.335725.com-福利彩票复式怎么买| www.625457.com-开心网彩票能玩吗| www.750905.com-彩点红单助手下载| www.84zn.com-打鱼游戏平台送彩金| www.290829.com-内蒙古快三转家预测| www.267611.com-彩票人工计划| www.223950.com-中国体彩网官方| www.150116.com-全民中彩票网址多少| www.142113.com-国家福彩快三| www.406806.com-非凡福彩走势图| www.lw59.com-500彩票大发快三| www.857656.com-福彩双色球结果今天| www.n27.net-爱彩乐怎么登陆不了| www.7781.cm-七乐彩及中奖规则| www.039942.com-百姓彩票站长| www.111232.com-御彩轩app苹果| www.365434.cc-彩铅画小清新少女裙| www.cx1.cc-福彩近30期走势图| www.d88.loan-霍华德彩票中奖指南| www.936770.com-七乐彩复式中奖规则| www.862873.com-福彩七乐彩几点开奖| www.rg64.com-4十1彩票开奖结果| www.139921.com-七星彩加急版专区| www.337880.com-手机网上怎么买体彩| www.031979.com-我爱彩票软件| www.232999.cc-体育彩票大乐透机选| www.w10.org-彩票3d几个号中奖| www.544478.com-500彩票有规律吗| www.oy01.com-网易足彩专家推荐| www.23.vip-七星彩内部有透露吗| www.022898.com-中心彩报-| www.112095.com-彩票平台下载合集| www.kw33.com-大发快三吧-| www.182863.com-江苏快三网址| www.306095.com-727竞彩彩票| www.381604.com-福利彩票第27期| www.748108.com-福彩3d中奖号d| www.366940.com-二年级传统彩铅画| www.1380.cm-奔驰彩票靠谱吗| www.64604.com-好乐多彩票骗局揭秘| www.059689.com-彩票奖项说明| www.677670.com-华彩赢家是骗局吗| 全民汇彩票www.52303x.com| www.221915.com-北京体育彩票官网| www.358249.com-有没有四个号的彩票| www.485345.com-关于世界杯彩票| www.590114.com-七星彩定胆杀号大全| www.659183.com-欧洲杯足彩app| www.719236.com-形容彩虹的比喻句| www.789578.com-足彩竞猜什么叫上盘| www.853458.com-彩票616-| www.909627.com-今天福彩三d彩报图| www.963824.com-斗鱼刮彩票怎么玩的| 快彩在线www.2632i.com| www.346585.com-明彩影视-| www.412448.com-彩钢供求网-| www.974693.com-江苏体彩网唯一官网| www.kn1.com-江苏快三多久一期| www.mf69.com-好彩投彩票-| www.s10.xyz-600彩票-| www.969502.com-酷彩吧网页-| www.cai5966.com湖北快三一定牛| www.835592.com-有彩票预测软件吗| www.906920.com-极速快三稳赢技巧| www.979976.com-福彩网站资讯搜索| www.cai7123.com江西福彩快三走势图| www.hu74.com-五分快三走势图开奖| www.890470.com-坤彩科技价值分析| www.974320.com-中国福彩三d开奖号| 彩神帝www.826556.com| www.051425.com-3d福彩试机号查询| www.82839.cc-甘肃体彩中心在哪里| www.112102.com-下载可宝彩票| www.175951.com-买高频彩必输原因| www.470250.com-国家对境外网络彩票| www.568813.com-大彩鲸推荐-| www.637075.com-彩虹5无人机实战| www.98728.com-时时彩有多假| www.118276.com-555彩票网下载| www.505304.com-皇乐彩票怎么赚钱| www.612429.com-福利彩票破解方法| www.681552.com-辽宁省彩票发行中心| www.763712.com-体育彩票跨度多少| www.837464.com-投彩跟计划骗局揭秘| www.904007.com-彩票app定制| www.960320.com-江苏彩票大奖排行| 大赢家彩票平台www.976291.com| www.g37.club-七星彩局王-| www.64561.com-彩色纸箱-| www.63vy.com-福彩彩票开机号| www.629977.com-美国彩票最大奖号码| www.755025.com-百乐彩手机版客户端| www.856207.com-福彩3d详情和规则| www.930204.com-江西快三押注| www.995284.com-体彩哪个台开奖| www.kw07.com-快三有哪些技巧| www.4262.biz-福彩三d双彩图| www.199019.com-福彩双色球开奖45| www.716538.com-购力七星彩奖表| www.8521.biz-彩之王是否真的怀孕| www.51410.com-时时彩怎样投都是输| www.857009.com-中奖几率最大的彩票|