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天

知道了
亚洲28 www.156005.com-福彩3地试机号今天| www.825810.com-福彩投注点-| www.938678.com-足彩竟彩新浪网| www.cai93.com-快三贵州-| www.517660.com-在国内做博彩代理| www.212382.com-淘彩票平台-| www.304958.com-11选5彩票官方| www.62862.cc-19049七星彩| www.68612.com-河北竞彩快三| www.039133.com-彩票行家c0m| www.098713.com-体彩排列三中奖查询| www.663737.com-南宁市福彩中心地址| www.871090.com-网上彩票快三骗局| www.954094.com-甘肃快三和值表图片| www.cai0255.com快三走势图今天湖北| www.151653.com-彩票软件哪个最好| www.363666.cc-御彩轩计划软件官网| www.567902.com-彩票快三怎么玩儿| www.757228.com-彩色混凝土路面材料| www.848245.com-36o北京快三| www.920217.com-免费彩gg计划| www.pp37.com-福彩3d藏机图谜| www.21655.com-彩票客户端如何挣钱| www.622057.com-福中福彩票中心| www.730646.com-易彩网大乐透| www.825041.com-如何制止老公买彩票| www.914100.com-全民中彩票快三| www.540092.com-样买二元彩票网| www.993467.com-足彩拉力理论解释| www.524477.com-918彩票查询| www.386555.com-3d彩宝贝金码| www.545208.com-用统计学推算彩票| www.134521.com-好彩香烟哪个好抽| www.114613.com-福彩3d最好软件| www.286856.com-快频彩票合法不| www.445113.com-晋城福利彩票网点| www.542562.com-乐彩网排列五推荐| www.637641.com-彩虹6号为什么火了| www.552233.com-采乐汇彩票-| www.726893.com-五福彩首页-| www.870748.com-易彩怎么解除银行卡| www.567732.com-彩c36官方-| www.716891.com-少儿彩铅画一级| www.658501.com-大发快三优信| www.770993.com-什么是时时彩龙虎和| www.169698.com-彩票入门基础知识| www.103426.cc-大发时时彩可信吗| www.337768.com-广西中烟彩票双色球| www.292193.com-人人快三老快三| www.728058.com-亿彩网正规吗| www.di2.com-博众时时彩官方网| www.826688.com-彩票签到活动| www.978618.com-天天中彩票查询3d| www.iz85.com-福彩双色球开奖时间| www.51376.cc-中彩堂正版料| www.60fq.com-易购彩骗局-| www.095120.com-福彩三地双彩图| www.86fz.com-排五两元彩票网| www.39334.com-时时彩攻略技巧集锦| www.28018.com-美国彩票领奖规则| www.97855.com-高返点的彩票网站| www.748385.com-中彩彩票一分三| www.819860.com-买彩票的坏处| www.889549.com-全民汇彩票app| www.956937.com-可以挂机的彩票平台| 博友彩www.9050.cc| www.bl80.com-神州彩票厘模式| www.306425.com-彩688-| www.609292.com-新彊福利彩票时时彩| www.33204.com-请下载全民彩票| www.610108.com-帮我选彩票号| www.688077.com-彩票天天中奖靠谱吗| www.1120.vip-玩彩屠龙是什么意思| www.796508.com-马来分分彩开奖网址| www.ks07.com-上海快三开盘时间| www.9649.com-网上有买彩票的吗| www.7328.biz-彩虹5无人机尺寸| www.551605.com-粤彩网彩票靠谱吗| www.8808.name-章鱼彩票不能买了| www.57177.cc-排列三黑彩平台技巧| www.225302.com-彩票长期守号秘籍| www.588929.com-玩家时代彩票平台| www.687691.com-彩神通电脑版| www.34hr.com-足彩通有猫腻吗| 99彩票www.363116.com| www.71ee.com-118彩票网址| www.368921.com-手动彩票摇奖机| www.879028.com-棋牌彩票一体的游戏| www.956449.com-今晚七星彩开奖信息| www.cai52.com-快三开奖结果走势图| www.275335.com-台湾彩票官方网站| www.490505.com-怎么买彩票稳赚不赔| www.597707.com-体彩11选5安卓| www.683893.com-49c永利彩票| www.788631.com-河南彩礼为何这么高| www.878098.com-福彩双色球开奖预测| www.965851.com-发彩网彩票站怎么样| www.dj06.com-生肖彩票玩法| www.q12.live-上海彩选4开奖结果| www.98jf.com-彩票该玩吗-| www.49266.com-买重庆时时彩的技巧| www.12ir.com-梦到彩虹还拍照| www.340889.com-1o5彩票下载| www.7354.tv-足彩附近店-| www.50104.com-彩神通关注金码和尾| www.7274.net-hdp添加彩虹频道| www.873764.com-彩34-| www.19iz.com-东平彩票中奖| www.654663.com-宜春体彩店-| www.755866.com-乐58彩票是真的吗| www.879552.com-网上彩票代理| 160彩票www.160wt.com| www.872549.com-彩票256正版| www.609172.com-万优福彩-| www.301708.com-彩票字谜-| www.zi56.com-湖南良新快三真假| www.905481.com-嬴彩天下与你伺行| www.9619.loan-名彩论坛专家| www.41149.com-福彩3d怎样定大小| www.318960.com-时时彩后三有多少注| www.33nz.com-七星彩开奖开奖今晚| www.067071.com-彩票打印机故障| www.155634.com-正规合法的网络彩票| www.448253.com-彩票工具网(最新)| www.289532.com-七乐彩中奖金额查询| www.07794.com-中彩那天的板书| www.869937.com-彩彩票开奖查询| 博通彩票www.606624.com| 幸运彩票www.317299.com| www.87pp.com-98娱乐彩票-| www.272607.com-传统彩是什么彩票| www.519519.cc-职业竞彩团队| www.576415.com-彩霸王综合资料来料| www.81608.com-昨晚彩票出什么号| www.762179.com-奇门测港彩技术| www.93072.com-投彩跟计划骗局揭秘| www.518252.com-彩票代理怎么盈利| www.129894.com-凤翔彩票app下载| www.026780.com-看彩票走势骗局| www.189869.com-江苏福彩快3遗漏号| www.cp212.com-一分快三彩票| www.424115.com-国乐彩骗局-| www.bj5.com-福彩快三中奖奖金表| www.664603.com-七乐彩哪个台直播| www.83518.cc-提前预判彩票| www.761354.com-延吉市体育彩票站点| www.867090.com-58期体育彩票奖号| www.945764.com-厦门体彩兑奖中心| www.cai0999.com太多的江苏快三骗局| www.uj59.com-彩票大赢家手机| www.854416.com-新浪爱彩竞彩篮球| www.905500.com-吉利彩票倒闭| 购彩网www.913gc.com| www.63jk.com-时时彩app源码| www.185932.com-一分时时彩计算公式| www.471888.com-现代中彩票类的小说| www.4250.net-彩虹连接-| www.93552.cc-彩809-| www.250881.com-豪彩app-| www.18aj.com-七乐彩最新预测号码| www.821717.com-彩票异地领奖时间| www.923660.com-体彩骰子-| www.93op.com-迷彩虎军事-| www.029775.com-体彩兑奖后多久到账|