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.zk77.com-安卓彩票软件破解版| www.691602.com-足彩对阵表新浪| www.830815.com-新彩票首页网| www.974534.com-彩运来官网检测| www.ua12.com-屠龙什么意思彩票| www.634599.com-七彩孔雀蓝建盏| www.537930.com-彩宝的意义-| www.296930.com-彩是什么意思| www.456768.com-大陆有可能开马彩吗| www.582512.com-福利彩票投资赚钱| www.688033.com-掌上彩票最新版下载| www.778758.com-多乐彩票是什么| www.81pe.com-乾特商城火箭彩票| www.4800.me-彩95平台下载| www.26268.com-彩吧3d迷图第三版| www.247322.com-地区快三盈利| www.9357.xyz-cc国际彩票-| www.37238.com-奖多多一彩票下载| www.924941.com-傲赢竞彩app| www.10482.com-足彩了310星相图| www.55yi.com-陕西省福彩中心图片| www.3075.com-云购彩票网官网首页| www.238040.com-998彩票app| www.352835.com-热购彩票真的假的| www.478827.com-竞彩奖金优化计算器| www.559080.com-体彩中心的照片| www.4114.me-福彩有极速赛车吗| www.869539.com-福利彩票店怎么申请| www.55eb.com-933彩票怎么样| www.012437.com-快三三中二-| www.180072.com-江苏快三彩票网站| www.47vo.com-周春勇彩票书| www.hy27.com-吉林快三稳赚技巧| www.479509.com-足彩半场能交易吗| www.s86.org-福彩今晚开什么码| www.888629.com-078彩票推荐人| www.53726.cc-时时彩官方开奖查询| www.074339.com-石家庄拓彩美缝剂| www.070425.com-七乐彩今天开奖号码| www.500100.com-下载f彩网-| www.680172.com-彩票的真实性有多少| www.800075.cc-快三只追冷号怎样| www.904959.com-江苏快三怎么投注| www.988039.com-福彩能追加吗| www.im88.com-彩39-| www.17bt.cc-手机购买足球彩票| www.001107.com-篮球竞彩新浪博客| www.268220.com-彩票网app-| www.aj74.com-七星彩综合走势图| www.32zw.com-快乐三分彩顺口溜| www.363.cc-博牛彩票破解器| www.4621.biz-彩票买几注能中大奖| www.302615.com-977彩票网页| www.894523.com-彩票走势全国| 500彩票www.50064w.com| www.439654.com-花呗可不可以买彩票| www.562732.com-国外有哪些高频彩| www.635970.com-体育彩票智能选号| www.689822.com-微彩娱乐平台app| www.823289.com-附近的福彩店| www.975394.com-555彩票app-| www.dp15.com-什么软件能玩快三| www.11bm.cc-桃花彩铅画图片大全| www.444441.com-足球彩票那边是主| www.607478.com-乐彩网中彩网| www.795566.com-福利彩票兑奖结| www.907978.com-七星彩好中吗| www.iw33.com-竞彩网直播比分直播| www.954525.com-奔驰彩票计划网| www.843432.com-体育彩票公益口号| www.098720.com-快三号码表下载| www.227338.com-快三怎么看-| www.356934.com-谁的朋友中过彩票| www.72se.com-1516ccm彩票| www.69iq.com-彩娱乐靠谱吗| www.972256.com-彩票api平台| www.js53.cc-彩票33安卓版下载| www.10og.com-玩彩票赢了-| www.oe42.com-卓易彩票所有版本| www.3688.win-彩色复印机租赁报价| www.234006.com-新版微信如何买彩票| www.190136.com-快三长龙出现的征兆| www.695757.com-竞彩串关玩法| www.789163.com-足彩中奖怎么算奖金| www.699609.com-瑞彩祥云幸运快3群| www.605.cm-3g时时彩计划| www.03268.com-怎么戒除买彩票| www.035708.com-中国彩票哪个靠谱| www.689050.com-体彩可以手机投注| www.791949.com-附近彩票站电话| www.866938.com-即开型彩票常识| www.924968.com-豹赢彩票骗局| www.982385.com-遵义彩票销售员| www.kv8.cc-玩快三有赚钱的吗| www.pw10.com-珠江彩票计划网址| www.38kl.com-人物彩铅简笔画| www.11yg.com-福彩时时采彩| www.26565.com-七星彩怎么选号呢| www.179557.com-彩票计划app推荐| www.306456.com-bu彩票-| www.771409.com-体彩任选5-| www.881041.com-人人乐彩票靠谱吗| www.yo79.com-彩票胆拖-| www.972833.com-6698彩票平台| www.619579.com-中阿彩票app下载| www.732109.com-88彩票网-| www.852653.com-北京福彩投注站| www.7343.vip-彩虹六号技巧| www.53376.cc-上海彩虹冰淇淋机| www.024027.com-如何做私彩老板| www.126092.com-上海体彩app下载| www.203977.com-福彩玩法说明| www.329688.com-天天中彩票没法升级| www.466365.com-七乐彩特别号怎么选| www.576994.com-快彩王平台-| www.717037.com-彩色铅笔牌子排名| www.837425.com-立彩是真的吗| www.968754.com-彩世界时时彩软件| www.8pu.com-竞彩店转让信息| www.125398.com-青海福彩的规定| www.085027.com-彩庫寶典-| www.510250.com-夸女生好看的彩虹屁| www.802722.com-下载福彩感恩app| www.235.cm-好彩一生肖-| www.9876.net-4场进球彩销量查询| www.389077.com-福彩3d专家排行| www.89103.com-娱乐游戏免费送彩金| www.151057.com-彩票网站登录| www.325744.com-排三试机号彩宝| www.513652.com-福彩3d断组方法| www.776552.com-唐龙说彩3d关注| www.963124.com-彩钢板房-| www.128043.com-图片彩虹大全| www.530361.com-中国竟彩比分直播| www.653008.com-港彩正版彩图挂牌| www.51ni.cc-苏州体彩中心在哪| www.1699.space-公益彩票团队计划| www.83448.com-竞彩让平有哪些特点| www.055978.com-预测河北快三出奖| www.111687.com-高手资料彩票大全| www.177061.com-三分快三怎么算| www.822862.com-福彩站点编号| www.891204.com-彩票历史号码对比器| www.966770.com-彩票走努图首页| 新盈彩www.xinyc8.com| www.go62.com-2018新郑彩礼| www.231038.com-青岛有快三彩票吗| www.307215.com-买快三的技巧和秘诀| www.163298.com-3d彩图吧-| www.298506.com-体彩标准店图片大全| www.05vy.com-十大水彩颜料品牌| www.4648.cm-每天2元买彩票| www.11736.cc-双色球彩乐乐| www.72491.com-优彩网手机版本下载| www.ua71.com-快三一倍多少钱| www.258544.com-大发快三计划免费版| www.62683.cc-信彩分分彩-| www.96999.cc-福彩3d账号注册| www.343779.com-78彩票真不真| www.444277.com-福彩3d14点和值| www.522522.cc-全新腾讯5分彩| www.753010.com-有多少种彩票| www.652236.com-福彩3d试机号金碼| www.25iy.com-钢琴华彩什么意思|