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天

知道了
百盈PK10 www.565345.com-福彩3d今晚怪字帖| www.553553.com-竞彩nba宣传海报| www.662326.com-易彩网是做什么的| www.771572.com-8k彩票一彩种| www.863666.cc-83彩票平台-| www.932008.com-最新双色球维彩视频| www.996404.com-摆渡龙江体彩| www.cc17.com-内蒙古时时彩走势图| www.ym09.com-手机福利彩票正规吗| www.932077.com-7728彩票下载| www.qt.com-彩票选号-| www.f37.club-中乐彩提现-| www.650991.com-水彩肖像画-| www.257.cm-彩票双色球兑奖表格| www.0798.net-nb彩票-| www.023880.com-中国体彩网彩迷天地| www.166919.com-江苏快三中奖规则| www.417721.com-c53彩票领跑者| www.556619.com-北京28彩票-| www.651260.com-体彩玩法-| www.720448.com-七星彩最新开奖号| www.nb57.com-红牛彩票官网| www.537396.com-彩色物品-| www.95202.com-彩妆蛋怎么用| www.38229.com-8亿彩怎么不能下载| www.95786.com-t体彩网-| www.479779.com-体彩7星彩奖金| www.881168.com-赢家彩票邀请码多少| www.gi97.com-快三秒加盟费| www.n36.cc-凤凰彩票是真的假的| www.60xl.com-竞彩赛事-| www.1880.club-大象彩票手机版下载| www.4896.vip-福彩3d跟单-| www.21795.cc-天天签到存款赠彩金| www.588955.cc-足球彩票单场胜负| www.664980.com-福利彩票39期| www.736728.com-爱彩乐苹果版下载| www.821512.com-附近彩票店开在哪里| www.901378.com-k8彩票登录平台| www.977316.com-18137期足彩| www.ax36.com-江西快三中奖金额| www.tz13.com-福彩屠龙啥意思啊| www.18iz.com-7乐彩开奖今天今天| www.360437.com-彩票心理学-| www.144863.com-3d彩报蓝精灵b| www.322709.com-国彩网-| www.476464.com-中国彩吧更懂彩民1| www.610561.com-四个数的彩票叫什么| www.761046.com-秒速时时彩个位计划| www.876828.com-体彩什么时候开始卖| www.979462.com-1月19日晚晚好彩| www.73hf.com-凤凰iii彩票| www.4556.xyz-任晓峰买彩票不中奖| www.23822.com-爱购彩票网址| www.02658.com-江苏快三官方注册| www.930790.com-彩民中奖故事新闻| www.wl79.cc-凤凰vip一分快三| www.5583.cn-小彩牛干红葡萄酒| www.026910.com-招彩票刷手-| www.221981.com-几分钟开一次的彩票| www.hc80.com-彩运8app-| www.05oq.com-体彩排列三跨度遗漏| www.730231.com-鸿鑫时时彩骗局揭秘| www.805599.com-福彩双色球几种玩法| www.891393.com-福利彩票开业广告词| www.958294.com-福彩3d买法大全| 天地彩www.33tdc.com| www.127309.com-彩铅画简单好看易画| www.300063.cc-一分钟一期快三| www.99371.com-特彩吧旧版原版正料| 91彩票www.9155f.com| www.sy26.com-几种彩票-| www.717.cm-非法经营体彩判几年| www.54714.com-彩金论坛-| www.365686.com-大发快三稳赚打法| www.150182.com-安徽快三时时彩网站| www.hw55.com-北京彩票论坛| www.074110.com-宏发快三有什么规律| www.225441.com-英国五分彩开奖结果| www.258905.com-皇冠竞彩软件| www.375715.com-藏机图彩搜-| www.597704.com-彩票猜谜-| www.876283.com-体彩5d一等奖| www.974826.com-全国开奖七星彩| www.eo97.com-内蒙古快三质合| www.ch2.com-分分快三是官方的吗| www.30pd.com-皇元彩票官网| www.01459.com-米兜彩票神单分享| www.749108.com-快三三不同号技巧| www.4596.cc-彩票中奖10000| www.439243.com-4lcc金彩网百度| www.586151.com-i8cp彩票线路| www.59924.com-微彩吧彩票-| www.105448.com-7k官方彩票网| www.350238.com-9万彩票贴吧| www.578823.com-福利彩票牌匾| www.533550.com-买什么彩票简单一点| www.834590.com-好彩爆珠烟价格| www.909378.com-彩吧迷图第二版| www.cb32.com-81彩票-| www.99kn.com-博竟时时彩app| www.51386.cc-牛彩湖北快3走势图| www.286795.com-安徽福彩快开三| www.470096.com-境外博彩工作犯法吗| www.528779.com-怎样买复式彩票| www.635395.com-e球彩复式投注表| www.hs56.com-竞彩之家app| www.13nh.com-时时彩后二技巧规律| www.005758.com-彩票网站出租| www.231944.com-福彩字谜图迷总汇| www.356782.com-中国红彩票20| www.558200.com-1分时时彩计划| www.714774.com-瑞彩祥云网址多少| www.980924.com-彩788贴吧-| www.by46.com-快三平台计划软件| www.9oj.com-一福彩三d图画| www.867456.com-七星彩昨晚开什么奖| www.994914.com-好彩堂玄机跑狗图| www.62fj.com-体育彩票市场竞彩猫| www.2684.me-约彩彩票停售| www.41113.com-彩6官方彩票网站| www.021826.com-足彩微信交流群| www.217170.com-快彩app有几种| www.335781.com-山东体彩网官方网站| www.502538.com-五亿彩是什么| www.638525.com-沈阳竞彩店-| www.782826.com-鸿运彩票平台安全吗| www.924942.com-网络彩票销售话术| 500彩票www.324277.com| www.577522.com-七星彩全国可领吗| www.291.red-彩票七星中奖规则| www.182029.com-福彩快三新规定| www.154034.com-新手怎么看足彩| www.514880.com-七星彩三定位多少钱| www.vb27.com-1分快三数字规律题| www.877615.com-名和彩迷-| www.877641.com-彩票在五行属火吗| www.95ci.com-刷彩票立返-| www.071505.com-人人竞彩apk| www.dv48.com-福彩一分快三下载| www.18177.com-足球竞彩模拟投注| www.660751.com-170彩票网图谜| www.35yg.com-九亿彩票安全吗| www.30430.com-官方体彩-| www.3886.in-彩金和黄金哪个值钱| www.21222.com-博盈彩票平台| www.84908.com-体育彩票兑奖码| www.330068.com-中国彩吧更懂彩民| www.38is.com-泽华彩票管理系统| www.29750.com-大福彩票算违法吗| www.237534.com-云发购彩票是什么| www.620926.com-天天彩票网页计划| 乐盈彩票www.44kcw.com| www.3216.in-凤凰彩票是骗局| www.33938.cc-彩票分析师工作| www.742146.com-天天中彩票软件版本| www.085085.cc-平台彩票ios版| www.466946.com-双色球神彩飞扬预测| www.81lo.com-海南体彩环岛赛直播| www.925511.com-旭彩app下载| www.950.date-彩票中心没有双色球| www.0370.cc-快乐彩助手-| www.28001.com-快三砍龙有什么技巧| www.735908.com-彩票培训师证书|