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.cai4366.com内蒙古快三专家推号| www.385018.com-足彩竞彩拖胆啥意思| www.512675.com-包吃招聘彩票销售员| www.8005.cm-时时彩一帆风顺规律| www.866707.com-福彩昨天开奖的结果| www.952360.com-8888彩票可靠吗| 爱购彩票www.053552.com| www.mi46.com-好彩店-| www.n68.cc-怎么彩票才能中奖| www.58hl.com-宿迁买彩票中奖| www.2456.net-大玩家彩票京东兑换| www.8279.biz-久久彩票彩-| www.36gr.com-七星彩和值走劳| www.5216.me-派彩怎样切换走势图| www.12373.cc-足彩竞彩怎么投注| www.919647.com-时时彩搭建开发| www.989363.com-彩漂伤皮肤吗| www.an84.com-贵州省体彩-| www.rj88.cc-那种彩票最容易中奖| www.098798.com-张社会彩票微信| www.181718.com-福利彩票河北快三| www.259335.com-那个彩票软件最好用| www.927789.com-猜生肖的是什么彩票| 亿彩堂www.87668s.com| www.jz69.com-国外教授破解彩票| www.2px.cc-竞彩全黑-| www.1365.vip-vr彩票下载-| www.9381.in-彩票那看真假| www.hp7.com-彩票合买平台app| 大赢家彩票网www.178326.com| www.386080.com-体彩任选五兑奖规则| www.664527.com-七乐彩开奖对比器| www.751502.com-彩票碎了还能兑| www.825511.com-上彩传媒-| www.903691.com-京剧催祥云驾瑞彩| www.981247.com-彩票三星做号软件| www.cg28.com-伯爵彩票-| www.d71.club-必中彩计划团队| www.4644.vip-彩票亏多少-| www.05204.com-国家最新彩票政策| www.92938.com-岩棉彩钢板价格| www.061158.com-彩客站是骗局吗| www.83tf.com-中金彩注册-| www.4249.com-乐彩彩票是真的吗| www.16537.com-五分时时彩计划人工| www.285358.com-福彩快3助手官网| www.386960.com-香港彩票网大全| www.586649.com-快乐彩票彩种| www.672657.com-买了彩票掉了| www.781969.com-南洋乐和彩网首页| www.870290.com-彩票店的前景如何| www.947873.com-购彩网站哪个最好| 网易彩票www.36788q.com| www.mq17.com-玩时时彩输了很多钱| www.04ni.com-容易临摹的彩铅名画| www.69xb.com-蚂蚁彩票输死多少人| www.1303.com-128彩票是正规| www.8212.loan-大富彩票客服| www.93922.com-福彩3地图-| www.261582.com-百盈快三有什么规律| www.633384.com-幸运彩高手-| www.725308.com-体彩是赌博么| www.825698.com-北京快三历史查询| www.900704.com-网络福彩举报| www.967111.com-开体育彩票店抽成| www.cai799.com-江苏快三中奖规则| www.145245.com-彩票的漏洞-| www.710095.com-手机彩票有赢的吗| www.789078.com-足球竞彩投注app| www.864834.com-安徽快三号码分布| www.933859.com-新浪彩票名家| www.983640.com-合法的彩票有哪些| www.js42.com-彩票大小单双app| www.576212.com-东莞福彩网点| www.729949.com-卓易彩票软件| www.845362.com-中国福利彩票x性质| www.907014.com-彩票多少位数字| www.200244.com-qq的彩票竞猜凉了| www.333238.com-助赢分分彩软件下载| www.183103.com-体彩网即时比分| www.302072.com-彩经网预测资讯| www.382523.com-19036足彩-| www.525248.com-老彩票9-| www.671250.com-浙江快乐彩精准预测| www.776795.com-北京丹彩快三查询| www.908316.com-快三和值表图| www.975047.com-一一彩票开奖结果| www.cp8038.com-手机快三投注合法吗| www.xu38.com-也买彩是正规彩票吗| www.17ab.com-彩丰物流单号查询| www.98dd.com-彩运无限首页| www.32631.cc-福彩3d新闻-| www.64440.com-体彩排列五历史数据| www.13to.com-大型的彩票软件下载| www.98xw.com-彩8提现投注量| www.3916.vip-南国七星彩加急彩板| www.19hb.com-买彩票中奖的人结局| www.96wj.com-彩排的同义词| www.392332.com-收狐彩票-| www.611710.com-彩虹岛外挂-| www.677001.com-彩票平台赚钱可靠吗| www.754735.com-买马彩票开奖结果| www.823522.com-彩涂钢板标准| www.898315.com-广西风彩-| www.40310.com-2020彩票网平台| www.025087.com-爱彩通网站-| www.1877.in-今日彩客户端| www.822102.com-湖北快三预测推荐号| www.912783.com-欢乐彩官网-| www.985159.com-体彩店如何提高人气| www.544011.com-福彩老北京双胆| www.331192.com-福利彩票趋势图| www.397637.com-我想开彩票店怎么开| www.490052.com-福彩3d中奖率| www.549163.com-彩票世家app官网| www.309959.com-体育彩票多久过期| www.379657.com-买彩票有中的时候吗| www.499766.com-彩票078-| www.562603.com-南方神彩专家专栏| www.615451.com-体彩七位数投注技巧| www.670269.com-福彩东方6加1| www.221530.com-快彩平台骗局揭秘| www.171447.com-湖北今天快三开奖| www.714000.com-3b福彩中心开机号| www.800345.cc-必中彩票提现| www.869503.com-香港六禾彩开奖结果| 福彩网www.60007s.com| www.br06.com-至尊彩下载-| www.td43.com-赢彩彩票网站可靠吗| www.036043.com-彩计划下载安装?| www.763888.com-中彩在线真的假的| www.855044.com-雪缘足彩园比分直播| www.908552.com-彩票零风险倍投方法| www.957232.com-南国彩票精彩论| www.991554.com-彩吧vip正规吗| www.pn2.com-河南福彩-| www.na54.com-要下载福彩快3| www.pv9.cc-快三彩票是什么啊| www.oa03.com-福彩3d图谜总汇九| www.83001.com-福彩有投诉电话吗| www.862296.com-七星彩中奖查询结果| www.896987.com-美国彩票大奖排行榜| www.76vb.com-彩票开彩票开奖| www.1915.org-雷州七星彩梦册网| www.7938.wang-京彩计划-| www.39225.cc-彩票规则和开奖日期| www.002213.com-彩票复式中奖计算器| www.113785.com-重庆时时采彩走势图| www.171144.com-河北快三预测推荐| www.226148.com-彩票追号概率| www.282923.com-七星彩今日几点开奖| www.355889.com-好运来彩票会不会假| www.285869.com-怎么做彩票-| www.353825.com-彩票中奖后被杀| www.440875.com-彩色耐磨混凝土容重| www.532595.com-港彩公式计算彩软件| www.621789.com-118彩票开奖查询| www.678694.com-今天七星彩开奖视频| www.p73.net-新浪彩票数据提醒| www.781201.com-彩票收税多少| www.861451.com-安徽体彩中心在哪| www.108726.com-七星彩开奖历史数据| www.3104.biz-众发彩票害了多少人| www.088236.com-足彩310彩客|