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.827982.com-小站宝彩票官网| www.056672.com-谁有彩票网站推荐| www.691242.com-足彩单场竞猜网易| www.2305.vip-福彩三d寻码图| www.14898.com-时时彩跨度什么意思| www.029948.com-福彩3d幸运码下载| www.152920.com-彩票资金构成比例| www.337550.com-最新免费白菜彩金| www.739329.com-利澳彩票平台| www.865957.com-易网彩票免费预测| www.03307.com-彩票榜手机app| www.856906.com-福彩三地独胆预测| www.2936.net-浙江福利彩票福| www.051079.com-彩票路途遥远任务重| www.456881.com-时时彩飞艇直播| www.661949.com-六后彩民网-| www.92vd.com-大众彩票网开奖直播| www.8768.cn-福彩3d金开网| www.022104.com-福利彩票p62规则| www.206313.com-彩票江苏快三官网| www.453901.com-好多乐彩票-| www.711776.com-时时彩高手投注技巧| www.874612.com-福利彩票兑奖有提成| www.34467.com-彩票248彩平台| www.069349.com-亚彩会注册登陆| www.271882.com-立彩平台app| www.552960.com-时时彩反长龙必死| www.77up.com-代买外国彩票| www.926543.com-瑞彩下载-| www.cb24.com-快三什么平台好| www.20sv.com-提彩乃-| www.3514.me-玩彩票能赢钱吗| www.43216.com-彩经网吉林快三| www.055263.com-天空体彩开奖时间| www.199571.com-体彩今日开奖直播| www.339433.com-深圳福彩投诉| www.525060.com-博彩软件下载| www.888028.com-彩彩乐网-| 500彩票www.500713.com| www.427876.com-足彩4个3选缩9注| www.34419.com-上海福利彩票投注站| www.178486.cc-福彩3d综合走势图| www.838956.com-十分彩网平台| www.967107.com-体彩兑奖有提成吗| www.ge20.com-三分快三是真的吗| www.24qr.com-今晚免费直码七星彩| www.7987.vip-福利彩票3d论坛| www.005432.com-高频彩拉人-| www.127021.com-彩铅意境画-| www.255899.com-彩富网-| www.420281.com-彩票平台网址导航| www.590221.com-彩吧三d图谜第三版| www.740938.com-三千万彩票app| www.088477.com-旧版彩神争争霸2| www.230430.com-新3d彩吧-| www.443468.com-愽马彩票下载| www.670038.com-今晚七星彩开奖情况| www.379888.cc-彩丰行怎么样| www.614155.com-体彩票开奖号| www.758108.com-彩票计划员靠谱吗| www.958333.com-福利彩票多久一期| www.000991.com-山东体彩官网app| www.169998.com-贵州快三预测| www.363997.com-青海快三查询13| www.523290.com-福彩和体彩那个靠谱| www.771681.com-时时彩庄家追杀你| www.167197.com-福彩快三玩法介绍| www.534984.com-大同体彩中心地址| www.705116.com-中国体彩网现场直播| www.899906.com-发彩网彩票登录| www.579852.com-进球彩app怎么样| www.805099.com-七乐彩中奖条件| www.949603.com-百汇彩票靠谱吗| www.72bn.com-香港6合宝典彩图| www.200878.com-一定牛彩票网手机版| www.008008.com-福利七乐彩开奖号码| www.172351.com-福彩快三江西开奖| www.mb59.com-足彩软件下载排行榜| www.704904.com-向日葵彩票登录网址| www.947257.com-pc手机壳彩印机| www.065.link-新朗爱彩-| www.893980.com-公牛彩票app| www.650.hk-时时彩八码技巧| www.097865.com-福彩3d中奖口诀| www.351297.com-快彩app官方网| www.535936.com-彩票对几位数是中奖| www.774239.com-机选彩票双色球复试| www.970401.com-天天乐彩票合法吗| www.39686.cc-彩经彩票下载安装| www.443011.com-体彩排三杀码专家| www.141005.com-湖北福彩官方电话| www.280145.com-福彩12选5玩法| www.661630.com-如何竞猜足彩中奖| www.879346.com-pp彩票下载安装| 博友彩www.195322.com| www.968140.com-陕西福利彩票网| www.ng74.com-大发快三计划免费版| www.03868.com-买彩票总差一个好| www.826708.com-信达国际彩票| www.954453.com-浙江省体彩六十一| www.ah38.com-体彩481玩法规则| www.867503.com-海南体彩开奖结果| www.350876.com-欢乐快三是真的吗| www.562691.com-u9彩票网网站| www.258898.com-竞彩网投注支持比例| www.504896.com-人生是不是该有彩排| www.720044.com-七星彩怎么算能中奖| www.3oz.com-京彩娱乐是什么| www.4494.vip-彩票投注站概况| www.58239.cc-彩票彩乐园网| www.054959.com-国模彩炮图-| www.186552.com-福彩10分钟一开的| www.362995.com-体彩超级大乐透真假| www.520237.com-大型彩票中心| www.307299.com-爱彩乐算什么彩票| www.439055.com-福彩36o全国开奖| www.586574.com-wap中彩网网| www.776039.com-泊松足彩模型下载| www.982859.com-竞彩之家官网登录| www.ec55.com-玩一分彩有什么技巧| www.x11.in-500彩票包赚| www.85vx.com-趋势王彩票下载| www.4498.wang-彩票中奖捐款减税| www.33778.cc-吉祥彩0500cm| www.013574.com-七星彩涂-| www.148057.com-快彩票可以提现吗| www.314133.com-福彩票3月24号| www.419446.com-怎么申请体彩销售点| www.553270.com-足彩必输-| www.688889.com-广东体彩订票网| www.91ql.com-婚恋彩票骗局| www.821786.com-蓝球杀号彩乐乐| www.961914.com-三彩服饰价格| www.jt8.com-快三大小单双公式| www.00uz.com-彩票少一个角| www.039527.com-大中华彩票邀请码| www.165516.com-全民赢彩票官方版| www.248200.com-快三线上平台投注群| www.328202.com-港彩三中三免费公开| www.435005.com-都匀彩票站在那里| www.537020.com-彩票店主网名| www.672278.com-福彩机器打票的教程| www.741800.com-ios天天中彩票| www.906257.com-彩色的鸟-| www.970540.com-福彩三d试机号预测| 新盈彩www.xinyc2.com| www.986209.com-体彩p3开奖-| www.5791.biz-竞彩3场2关怎么算| www.29252.cc-鸿手机购彩-| www.6516.com-怎么样开彩票店| www.356818.com-河南快三40期| www.234669.com-福彩3d和制图| www.377227.com-重庆彩票软件| www.687409.com-陕西福利彩票中心| www.770673.com-老时时彩chart| www.fp16.com-燕赵福彩快三| www.53aw.com-同城彩票下载安装| www.6027.vip-山东省福利彩票中奖| www.37221.com-重庆中国体育彩票| www.022263.com-快三骗局全过程| www.520112.com-吉林快三投注| www.622915.com-传奇彩票是赌博| www.733263.com-江苏快三秘籍| www.843488.com-优秀彩票业主演讲稿|