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.974557.com-易众彩店怎么样| www.jg40.com-吉林快三大小规律| www.949989.com-百宝彩青海快三| www.kl85.com-易彩幸运三快| www.556640.com-彩票中奖领取期限| www.654335.com-东方彩票是正规的吗| www.752707.com-彩票平台首存| www.832753.com-七彩照片-| www.906414.com-江西快三网投| www.984235.com-下载吉林快三预测图| www.og1.com-甘肃快三开奖今天的| www.qq98.cc-1分时时彩开奖| www.183397.com-体彩网官方网站| www.28159.cc-欢乐十分彩骗局| www.77189.cc-彩票中奖感言| www.671119.com-福彩3d如何选胆| www.410781.com-彩票平台制作在哪找| www.919109.com-买过凤凰彩票的日子| www.886612.com-360彩票合买大厅| www.bg04.com-体彩大乐透下期分析| www.09243.com-安徽福利彩快3| www.3669.top-98彩票官方下载| www.19944.com-51中彩彩票网| www.71492.com-河南福彩中心电话| www.26ko.com-手机彩店-| www.3697.cn-网络彩票追回案例| www.179496.com-快三中奖奖金是多少| www.855632.com-七乐彩能买七个号码| www.854409.com-微信快三公众号| www.4835.vip-彩票选六中五保五| www.65175.com-足彩混合计算器| www.118206.com-彩票推算大师| www.29886.com-天天好彩949cc| www.015842.com-七星彩中奖有顺序吗| www.101982.com-体育彩票中心| www.306017.com-80彩票提现-| www.5389.cm-彩票777好不好| www.112414.com-杏彩彩票平台官网| www.948673.com-北京快三导师微信| www.xh.cc-福彩快三奖金一览表| www.tt55.cc-网上能买足彩吗| www.004913.com-彩神vll下载链接| www.60923.com-陕西彩旗快三开奖| www.066921.com-3d福彩杀号-| www.5050.mobi-足彩提前多久停售| www.164938.com-彩票新闻资讯大乐透| www.86833.com-广州鸣彩官方网站| www.0068.loan-彩票分什么类型| www.018832.com-香港彩富网免费资料| www.3600.biz-星期4开什么彩票| www.153270.com-广东福彩3d-| www.55645.com-简单水彩画入门图片| 大玩家彩票www.717229.com| www.409441.com-18052期足彩| www.517938.com-福彩3d开豹子| www.605322.com-手机怎样机选彩票| www.713963.com-福彩3d标准和差表| www.0790.tv-褔建今日快三| www.209339.com-玩福彩快三犯法吗| www.757187.cc-彩色混凝土路面报价| www.859266.com-体彩6十1中奖说明| www.920293.com-大奖快三技巧| www.973574.com-彩票和卖-| www.qw7.com-彩票口诀大全图片| www.rk92.com-七乐彩中奖说明| www.51.vip-体育彩票排列五| www.59oa.com-徐柯福彩-| www.523818.com-彩票代理招商网| www.6068.me-3d彩票秘诀-| www.17350.com-陌陌彩票app| www.8704.vip-动力体彩开奖| www.101816.com-全民足彩彩票| www.57739.cc-网络彩票app下载| www.440180.com-贵州体彩官方版| www.723551.com-彩票怎么中上亿大奖| www.14wu.com-今晚3d怪字彩吧图| www.271225.com-八亿彩平台-| www.341553.com-诺亚彩票手机下载| www.411966.com-怎样下载彩视| www.513510.com-三分钟时时彩技巧| www.579354.com-福彩3d返奖率| www.648365.com-中国体彩彩票点| www.722277.com-黑龙江体彩20选8| www.570038.com-惠泽夭下彩票| www.664929.com-浙江休彩6十1开奖| www.743178.com-香港皇家彩-| www.816580.com-福彩啥时候开奖呀| www.888666.com-彩站宝怎么注销账号| www.159123.com-易彩票漏洞-| www.cai222.cc-中国福利彩快3查询| www.og49.com-来彩020app-| www.89.cc-彩票网钱取不出来| www.370233.com-彩票机器造假视频| www.xe33.com-福彩三d怎样算和值| www.65nl.com-彩麒麟怎么越养越红| www.2852.bid-今晚有七星彩吗| www.05551.com-爱开彩app-| www.55525.com-七乐彩什么时候开始| www.ve38.com-河南福彩百度网| www.54rh.com-体彩金孔雀一等奖| www.6325.com-039彩票-| www.39252.cc-连中彩票安卓| www.057179.com-福彩三地投资计划| www.191068.com-快三中奖奖金怎么算| www.331420.com-金彩网合法吗| www.554749.com-福彩3d多少组合| www.632390.com-现在怎么买彩票| www.703808.cc-苏州快三开奖走势| www.506325.com-广东体彩网点征召| www.586617.com-存10送彩金-| www.654176.com-七星彩19029期| www.611868.com-双彩乡政府-| www.689036.com-81彩票网址-| www.772839.com-成都福彩中心地址| www.048217.com-快三缩水工具| www.402993.com-快三赔率是多少| www.181518.com-快三app网址| www.18569.com-彩票第一狂人| www.499781.com-澳洲快三哪里开奖的| www.668050.com-港彩神算高手坛| www.333488.com-玩彩网app-| www.440676.com-彩宝吉林快三| www.i67.club-天吉彩票官网| www.251777.com-2元彩票软件| www.44202.com-7星彩论坛-| www.43bu.com-足彩2串1规则| www.1565.vip-群英会彩票云彩宝| www.8049.com-3d水彩香推荐号码| www.448683.com-开彩票站怎么提成| www.817560.com-七星彩交流论坛| www.887580.com-黑彩平台代理贴吧| www.969956.com-高频彩走势网易| www.mf6.com-河北快三预测一定牛| www.309844.com-长春体彩去中心兑奖| www.ow27.com-双彩网下载-| www.013856.com-七星彩开机号查询| www.807015.com-山东体彩客户端下载| www.900940.com-秀才老汉福彩3d| www.960970.com-时时彩亏损返现平台| 9928彩票www.9928e.com| www.715913.com-雅彩票-| www.789675.com-投彩跟计划骗局| www.860073.com-时时彩完整源码程序| www.930381.com-广州佛山快三查询| www.982252.com-印象彩票赛车| www.bn81.com-靠谱的彩票平台平台| www.vq65.com-吉林快三计划书| www.065295.com-私彩会跟官网联网吗| www.07508.com-彩乐乐专家杀号3d| www.719600.com-彩报第五版-| www.059920.com-中央对福彩作弊事件| www.433639.com-陕西乐彩快三| www.552097.com-东京1.5分彩计划| www.024170.com-高频彩最稳倍投技巧| www.75.la-湖南有快三么| www.61sa.com-旺彩开奖号公布所有| www.688522.com-3地彩吧助手| www.791364.com-排列三彩宝网开机号| www.894622.com-彩票字图片-| www.952308.com-中彩啦是真的吗| www.999839.com-福彩排列五玩法| www.fd80.com-红牛彩票有赚的吗| www.759682.com-大中华彩票快3| www.370605.com-中博技术彩票网|