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天

知道了
1分快三 www.396830.com-体彩组六最大遗漏| www.553328.com-在手机上怎么买足彩| www.624126.com-采要牙i-彩票| www.695757.com-竞彩串关玩法| www.771976.com-五分快三中奖助手| www.845334.com-互娱彩票作弊器| www.909608.com-猜单双是什么彩票| www.970681.com-凤凰彩票赚钱可靠吗| www.cai105.com-快三平台官网| www.562263.com-上海基诺彩票奖金| www.654485.com-福彩全国排名| www.737786.com-重庆时时彩骗局微信| www.817553.com-彩票和值表-| www.890247.com-购买网络彩票合法吗| www.962784.com-星光彩票最新网站| 彩票5www.564846.com| www.366634.com-彩票查询33期| www.565554.com-彩票最高有多少条龙| www.747460.com-时彩软件-| www.256622.com-彩乐网的网站| www.850198.com-qq分彩全天计划| www.950453.com-竞彩亏盈公式| 幸运彩票www.luck885.com| www.pa22.cc-银川双色球彩民中奖| www.0yh.com-彩票助手怎么买彩票| www.57qg.com-福利彩票开试机号| www.1615.wang-云彩网彩票正规吗| www.7171.net-复式彩票选号器| www.21166.cc-彩票3d组六走势| www.61527.cc-乐米彩票改名字了| www.27581.cc-双色球彩票计算器| www.097027.com-彩票投哪些注| www.bf91.com-黑彩平台信誉排名| www.c12.org-重庆时时彩内部公式| www.50qz.com-天空行天下彩票| www.0228.me-澳洲时时彩技巧| www.5619.cc-买彩票的导师2| www.09010.com-33彩票怎么样| www.73322.com-七星彩明月铛| www.043771.com-分分彩经验-| www.985888.com-快三经常出的号码| www.dg49.com-福利彩票有哪些彩种| www.zt86.com-篮球竞彩分析推荐| www.81gm.com-福盈门彩票手机版| www.4413.cn-福利彩票倍数怎么打| www.9505.vip-财神腾讯十分彩| www.49882.com-彩神预测骗局| www.91512.cc-黄好彩香烟-| www.088705.com-中国福利彩票机选| www.44010.com-七星彩梦图解梦号码| www.3lu.com-88彩票官网注册| www.4339.biz-时时彩投注计划表| www.55033.com-彩票托胆-| www.225111.cc-宝马彩票app软件| www.66853.cc-不用彩票能兑奖吗| www.079912.com-国家彩票整改| www.159856.com-仙彩彩票-| www.226557.com-彩票漏洞论坛| www.290302.com-内蒙古快三直播间| www.90ga.com-彩票社區-| www.380488.com-好彩网双色球走势图| www.h78.club-福彩3d彩吧图谜| www.496451.com-体彩可以手机兑奖吗| www.687056.com-广东福彩官网电脑版| www.905083.com-苏州彩票店转让信息| www.359551.com-彩票开奖几点开始| www.155597.com-飞鱼彩票投注技巧| www.657825.com-彩神计划手机版苹果| www.21zq.com-天下彩高手网| www.658981.com-首页网青蛙彩票| www.bl14.com-神州彩票app| www.25cz.com-华彩的成语-| www.990456.cc-怎么注册汇彩网| www.122033.com-江西彩票快手网| www.258399.com-竞彩交易量-| www.381549.com-周日什么彩票开奖| www.925505.com-博应用彩库宝典| www.5718.pw-福利彩票13人| www.66321.com-千禧彩票线路导航| www.9698.biz-体育足彩直播吧| www.97577.cc-每日竞彩二串一推荐| www.801754.com-福彩一体机怎么样的| www.447328.com-奥克足彩网-| www.675.live-8k彩票注册账号码| www.984011.com-彩99网络彩票| www.rz02.com-致富彩票1分快3| www.024012.com-台湾5分彩开奖官方| www.281722.com-重庆时时彩作弊开挂| www.357355.com-中了彩票没有告诉| www.711387.com-天天福彩平台| www.688.hk-福彩快3官方网| www.7690.org-美宝莲彩妆加盟价格| www.153637.com-江苏快三可以玩吗| www.vq53.com-河南幸运彩2走势图| www.818583.com-五百万彩票怎么下载| www.187248.com-45彩票-| www.357587.com-合伙买彩票的协议| www.563887.com-500线上彩票下载| www.299326.com-看彩票走势图怎么看| www.942902.com-八号彩票登陆网址| www.549058.com-今晚天彩票几点开奖| 博友彩www.776860.com| www.913526.com-彩票预测最精准公式| www.604178.com-加州彩票开奖查询| www.594319.com-三思彩玄机-| www.551511.com-久乐彩票网购| www.xl91.com-11选五彩票-| www.421.tv-网络彩票今天开售| www.305579.com-福利彩票开店流程| www.7000.cm-快三末班车几点| www.155384.com-7728彩票-| www.639282.com-天津彩票站转让信息| www.272677.com-贵州快三当前遗漏| www.14fi.com-下载注册体彩网| www.271.website彩票图谜软件| www.4322.biz-江苏福彩电话| www.12840.com-足球彩票去哪里买| www.662525.com-福彩3d在哪开奖| www.113315.com-彩票中奖技巧| www.70649.com-彩票好假-| www.70ed.com-彩票查查询-| www.6294.cc-彩票刮刮卡扫描| www.597334.com-猜谜彩票合不合法| www.910107.com-粤彩联盟报今期| www.210779.com-宁夏快三今天走势图| www.99569.com-5分彩不定位胆| www.310158.com-亿网彩票怎么样| www.539314.com-买高频彩高手| www.0271.net-中了彩票的电视剧| www.576847.com-时时彩大小网页计划| www.952496.com-配送员中彩票| www.984025.com-518彩票官网| www.nd05.com-uu快三软件下载| www.354.me-七星彩最新开奖现场| www.ru18.com-中彩网首业-| www.87od.com-淘宝网买彩票在哪里| www.138030.com-从网上可以买彩票吗| www.a52.pw-胜负彩彩民心得| 彩吧www.580820.com| www.fe94.com-福彩3d独家解密| www.497730.com-辉煌彩票手机版| www.233425.com-快三一定牛吉林| www.12367.com-105彩票码下载| www.091821.com-福彩是骗局-| www.89238.cc-易旺彩票地址是多少| www.035051.com-彩票平台刷返利教程| www.622778.com-红牛彩票是什么| www.29942.com-名人彩票测速登陆| www.232833.com-彩票号码预测神器| www.806776.com-好用的体育彩票软件| 大赢家彩票平台www.810619.com| www.369013.com-go彩活动合法吗| www.120480.com-重庆时时彩有官方么| www.378207.com-幸运彩大发快3下载| www.280996.com-时时彩诈骗报警| www.34se.com-快三反计划倍投表| www.659450.com-天空彩票与我同行日| www.232162.com-旺彩社区-| www.897311.com-福彩扫码扫金条| www.8558.cn-彩票杀号有用吗| www.829000.com-新乐彩登陆-| www.566870.com-彩虹六号ela本子| www.999138.cc-e球彩2场全包玩法| www.906.cm-彩铅星空眼睛画法|