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.5375.cn-支付宝可以买彩票嘛| www.293773.com-688大发快三彩票| www.433877.com-威宁县彩票中奖| www.601243.com-jxtd555彩票| www.742799.com-中彩票app苹果| www.885188.com-二元彩票3d走势图| 亚投彩票www.ya848.com| www.09522.com-中国移动官方彩票| www.95351.com-烟台福彩中心主任| www.075939.com-体育彩票排列三字谜| www.175230.com-老快三跨度走势图| www.250325.com-彩中彩注册-| www.322199.com-七天彩票在线投注| www.393078.com-明天的福彩开奖号码| www.503867.com-所以彩票-| www.570775.com-青畦彩票-| www.638484.com-色彩风景照片素材| www.747009.com-购云彩票-| www.814829.com-中国福利3d彩| www.974880.com-体彩18084期| www.jd3.com-时时彩老玩家的经验| www.rg24.com-各种釉彩大瓶难度| www.08as.com-七星彩百度云| www.75ae.com-彩票投注网站哪家好| www.1190.pro-掌上购彩七天彩提现| www.8260.cc-福彩8首页下载| www.31884.com-易彩快3预测| www.77436.com-e乐彩手机登录版| www.030040.com-彩虹有什么含义| www.102988.com-彩票105官方网站| www.174244.com-可以玩快三的app| www.240852.com-彩神争覇-| www.311259.com-80彩票下载-| www.377206.com-腾讯75秒彩走势图| www.469169.com-玩彩网下载安卓版| www.550502.com-易彩开奖-| www.611866.com-福彩投注站点查询| www.678456.cc-开户娱乐彩金| www.751358.com-瑞彩祥云彩票微信群| www.815262.com-秒秒彩即时开奖彩票| www.zb97.com-3d彩报图今天图库| www.010123.cc-分分彩官方开奖| www.232306.com-福彩快三大小玩法| www.397147.com-我要搜索福利彩票| www.569810.com-彩票中奖有预感吗| www.723822.com-内蒙古快3高频彩| www.833207.com-55彩票官网下载| 网易彩票www.140599.com| www.qw92.com-时时彩团队送彩金| www.29ik.com-海南体彩投注软件| www.0856.net-中国福彩查询| www.8012.biz-十字彩官方网| www.35354.com-天津所有彩票大奖| www.86395.cc-如何画新彩线条| www.052608.com-安徽快三豹子分析群| www.179010.com-福彩快三官网下戴| www.260305.com-胜彩网站-| www.335469.com-体育彩票怎么买号| www.421605.com-七星彩代理-| www.528785.com-彩票双色指南报纸| www.623226.com-安宁区福彩中心楼| www.772199.com-时时彩任三混合技巧| www.901881.com-中科公益彩票靠谱吗| www.972874.com-足球彩客网-| www.go02.com-江苏快三有规律吗| www.zu00.com-彩虹儿童画-| www.2275.biz-时时彩搭建一条龙| www.13861.cc-008彩是真的吗| www.95570.com-体育彩票公益金比例| www.101898.com-烟台福彩中心地址| www.186647.com-快三定一码方法| www.288807.com-彩票推销术语| www.395081.com-彩虹代刷社区官网| www.533353.cc-彩票几注什么意思| www.706025.com-微微发彩网app| www.797909.com-34彩-| www.479704.com-彩票开奖7星彩| www.cv20.com-凤凰私彩的网址| www.51752.cc-体彩快乐11走势图| www.703051.com-完整版足球竞彩比分| www.619605.com-打彩票欠钱-| www.299471.com-中彩在线是骗人的吗| www.544212.com-福彩第2版-| www.ho03.com-彩票赚钱平台| www.08ud.com-体彩3开奖结果| www.977956.com-杭彩包装-| www.983975.com-开心七星彩彩版专区| www.a99.vip-十字彩下载-| www.1442.cm-大赢家时时彩| www.085034.com-多彩市场-| www.825945.com-彩王争霸下载| www.111475.com-战狼彩票精准计划| www.20720.cc-360竞彩足彩| www.773027.com-红中彩票平台客户端| www.927992.com-湖南体彩种类及玩法| www.ho9.com-快三爱彩乐官网| www.66cq.cc-彩票幽默搞笑图片| www.234100.cc-安徽省体彩中心地址| www.124173.com-彩票漏洞诈骗| www.222257.com-117彩票app-| www.518011.cc-正规彩票平台导航| www.860991.com-好彩1开奖号码| www.419806.com-印象彩票登陆| www.601159.com-彩票能提前买几期| www.267.org-郑州纸箱包装彩印| www.3215.org-福利彩票能挣钱吗| www.852.live-星际彩票app| www.iq56.com-宁夏快三开奖走试图| www.57962.com-978彩票靠谱吗| www.665284.com-彩虹岛装备交易平台| www.940455.com-中国福彩平台| www.824244.com-七星彩买奖网址| www.1643.cn-腾龙时时彩做号软件| www.366372.com-92彩票网官方网站| www.891581.com-洪荒之九彩凤凰| www.073105.com-赢家彩票下载| www.596733.com-浙江11选5彩票| www.052912.com-买彩网金手指日报| www.2028.in-彩虹六号游戏加速| www.1655.cm-足彩大小球升盘降盘| www.79860.com-甘肃体彩11选五| www.128513.com-好的彩票平台| www.292639.com-吉林快三在哪里开奖| www.195458.com-河北快三预测推荐表| www.86135.cc-马鞍山体彩中心| www.33he.com-飞来福彩吧站长彩吧| www.ps6.com-甘肃福利彩票官网| www.32dc.com-今天福彩什么开奖| www.92628.cc-中国体育彩票一定牛| www.572208.com-易语言彩票公式源码| www.05oo.com-体彩最大遗漏| www.355729.com-竞彩奖金个税| www.821781.com-彩乐乐双色球选号器| www.661753.com-体彩竞彩6x22| www.211749.com-极速快三购彩网| www.508923.com-北京快三近100期| www.502863.com-足彩做胆-| www.560917.com-彩票大师手机版下载| www.103405.com-旺彩大乐透选号| www.0139.cm-彩色的梦图画| www.574190.cc-彩票类app苹果| www.vz14.com-内蒙快三新玩法| www.705377.com-福利彩票怎么查开奖| www.105097.com-牛彩网开机号| www.vx52.com-时时彩百位杀号法| www.fn55.com-幸运快三有什么规律| www.75wv.com-利赢国际彩票app| www.653.me-时时彩正规投注平台| www.123429.cc-中国官方体彩下载| www.gk47.com-河南开封彩礼| www.98gm.com-国丰彩票是正规的吗| www.d32.loan-全民智投竞彩专家| www.97xq.com-黑彩网站破解| www.4378.in-地方彩票有哪些种类| www.39216.com-重庆彩独胆技巧| www.330299.com-沧州市福彩兑奖中心| www.428726.com-19047期七星彩| www.525553.com-福彩3d五行技巧| www.737985.com-体彩五d开将结果| www.173688.com-快三最大的漏洞| www.448336.cc-福彩演播室答题| www.593000.com-体彩大乐透有算法吗| www.783932.com-500彩票破解器| www.615287.com-搭建彩票平台教程|