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.394544.com-彩虹玫瑰花图片大全| www.660141.com-体育彩票店铺转让网| www.785873.com-七星彩什么开奖时间| www.go92.com-河南濮阳彩礼过高| www.i76.club-彩吧论论坛首页| www.47vc.com-在线投彩app| www.959.in-彩票遗漏概率极限| www.8368.vip-深圳彩皇电子厂| www.34501.com-彩票稳赢奥秘| www.82598.cc-足彩14场贴吧| www.063315.com-福彩押金-| www.509523.com-排列五走势图彩宝| www.586962.com-新版万彩吧-| www.663956.com-头彩是正规彩票网吗| www.751922.com-中国体彩网网| www.881845.com-倍投彩票-| www.963901.com-500彩票公司地址| 福彩www.86267i.com| www.hm13.com-快三8期倍投技巧| www.zj14.com-山东电脑福利彩票| www.27rb.com-拳皇全彩本子| www.0709.org-广州福彩申请条件| www.7259.cc-彩虹4无人机售价| www.23525.com-好彩五分快三导师群| www.68349.com-福彩走势图近30期| www.049960.com-体彩试机号金码关注| www.132297.com-濮阳结婚彩礼多少钱| www.209792.com-赢彩吧大发快3网址| www.283272.com-七星彩奖表图最新| www.391199.com-163彩票网页版| www.513718.com-凤凰彩票漏洞赚钱| www.586474.com-充值送彩金的大平台| www.660723.com-福体彩每日开奖| www.769889.com-下载好彩0567| www.859289.com-9万彩票下载| www.956797.com-小猪彩泥手工| 辉煌彩票www.www.2875s.com| www.eh03.com-福建彩票网-| www.xl49.com-福彩瑞app-| www.20zx.com-广西体彩客户端下载| www.3869.in-星彩彩票网-| www.9465.me-美国旅游能买彩票吗| www.56765.com-赢彩票是合法网站吗| www.016278.com-彩票计划员都在国外| www.085992.com-姜山足彩推荐| www.150785.com-彩票一等奖交多少税| www.261721.com-内蒙福彩快3推荐号| www.354022.com-潮信玩彩票的软件| www.437321.com-南宁三彩专卖店地址| www.530440.com-大乐彩多次开出结果| www.636669.com-香港电脑彩正版图片| www.722973.com-168彩票安装| www.796734.com-体彩任九19039| www.870063.com-江苏快三多少期| www.970816.com-福利彩票上海快三| www.cb63.com-天天彩下载-| www.sy11.cc-七星彩彩票简介| www.09vu.com-微商刷彩票赚钱| www.77am.com-酷彩吧打不开了| www.1354.xyz-中国体彩加盟多少钱| www.9076.live-福彩七乐彩怎么玩| www.44233.cc-彩票出票后请核对| www.88418.cc-澳洲强力球彩票| www.039558.com-爱快三彩票网| www.137401.com-彩票死绝密出号公式| www.211528.com-浙江快三开奖| www.279055.com-分分彩杀一码| www.378719.com-周口体彩中心在哪| www.523013.com-七彩乐居家政公司| www.611614.com-网上赌快三是真的吗| www.679687.com-戒博彩图片-| www.753152.com-中华彩吧的网站| www.858214.com-博彩理财真的吗| www.919106.com-彩票赌钱网站| www.974547.com-江苏福彩快三奖金表| www.vv1.com-福彩快三怎么开奖呢| www.qf70.com-全民足彩app下载| www.9zd.cc-七彩祥云是什么征兆| www.62ty.cc-福彩3d布衣天下二| www.0068.org-美国乐透彩票中奖| www.7307.cn-手机版彩虹六号叫啥| www.21331.cc-澳洲28是彩票吗| www.61616.com-中华彩票网址| www.027949.com-怎么区分黑彩票平台| www.097592.com-体彩专家预测号| www.158317.com-官方版好彩彩票| www.259287.com-福彩3地图谜| www.324795.com-吉隆坡博彩合法吗| www.388705.com-小米彩票怎么样| www.520741.com-石家庄体育彩票站点| www.585905.com-现金彩票下载| www.654213.com-假彩票机中国福彩| www.755404.com-旺彩十一选五推荐| www.880071.com-福彩独胆专家预测| www.954050.com-手机时时彩缩水软件| 盛大彩票www.ai772.com| www.bc02.com-安徽快三分布图| www.ra89.com-生日号码怎么买彩票| www.07rm.com-刚力彩芽和武井咲| www.69ic.com-搜狗彩票精准杀号| www.0370.site-时时彩快三-| www.7704.cm-中彩网的擂台赛| www.21662.cc-北京福彩网彩民之家| www.60404.com-彩票研究办法| www.028441.com-重庆福彩快-| www.097062.com-福彩公益时报谜语| www.156660.com-体彩领奖到那里领| www.255228.com-时时彩走势图app| www.319515.com-北京规模最大体彩店| www.383353.com-聚金网彩票-| www.515944.com-开户得彩金彩票| www.579018.com-体彩管理中心电话| www.642338.com-福彩标志图片含义| www.738036.com-下载5百万彩票| www.800137.com-美国的彩票业及发展| www.868942.com-体彩七星彩怎么兑奖| www.951274.com-腾讯彩票竞猜补偿| www.989406.com-宝马彩票是什么平台| www.cai7678.com广西快三走势图| www.iu17.com-足彩19052-| www.xy46.com-教育台直播福彩开奖| www.12gz.com-快三号码计算器| www.72ct.com-四位数福利彩票| www.0765.vip-立彩助手苹果| www.9499.online彩票不赔的买法| www.43807.com-可以网上购彩| www.84894.com-七星彩开机号今天| www.028983.com-风采彩票网预测| www.097714.com-东莞市福彩关爱基金| www.153768.com-中彩国际彩票官网| www.272537.com-ig彩票官方网站| www.347759.com-爱赢球彩票真的假的| www.412848.com-重庆试试彩骗局| www.505815.com-举报黑彩可以追回吗| www.567423.com-彩票欢乐生肖| www.625015.com-福彩过年-| www.681824.com-聚象购彩网-| www.750522.com-中彩曹毅-| www.807830.com-竞彩中心套利| www.871313.com-福彩快3线上平台| www.988025.com-彩票51中彩安全吗| www.cai5611.com北京福彩快三走势图| www.hu23.com-快三豹子1最高遗漏| www.xe43.com-海南七星彩软件| www.04rl.com-手绘彩铅教程| www.59gc.com-上市彩票-| www.610.biz-快三时时彩开奖预测| www.3685.cm-彩色复印机租哪家好| www.8450.cc-rc融彩网平台下载| www.66981.com-重庆体彩在哪里兑奖| www.019060.com-安微快三软件下载| www.074986.com-首达人彩票-| www.129292.com-安徽快三号码统计器| www.189038.com-江苏快三有什么规律| www.245777.com-河北福利彩票双色球| www.306783.cc-吉彩票-| www.365020.com-电玩城的彩票机| www.439099.com-uu反波彩票平台| www.517582.com-55彩票网站-| www.575273.com-3d彩宝贝走势图| www.633989.com-银川七彩艺校| www.801162.com-郎咸平彩票视频| www.863660.com-安徽省体彩中心主任| www.915068.com-大发快三投注攻略|