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.24663.com-彩铅画培训-| www.015649.com-彩票快三怎么下载| www.090113.com-全球彩票优惠| www.051720.com-河南快三遗漏回补| www.9839.biz-苏式彩画颜料| www.184712.com-黑龙江好彩快3| www.018847.com-足彩软件排名| www.098896.com-传统彩灯制作| www.607701.com-七乐彩星期五走势图| www.790830.com-申请免费彩金58| www.881708.com-500彩票包赔任务| www.963202.com-彩钢板规格-| www.cai5123.com内蒙福彩快三开奖| www.76488.com-福彩守号都是傻的| www.076797.com-快三六十一期开奖号| www.00660.cc-福彩机器怎么换纸| www.57185.com-快八彩票下载| www.705967.com-易发彩下载-| www.823522.com-彩涂钢板标准| www.916792.com-彩票举报平台登录| www.990306.com-彩票尾数规律| www.av86.cc-体彩速查表-| www.yo99.com-正规玩快三的app| www.84275.com-彩钢pvc卷材| www.112599.com-排列三的彩票元网| www.99pq.com-竞彩总进球数23球| www.5825.site-7彩网安全吗| www.121485.com-银川彩票转让| www.214331.com-有前景的体育彩票店| www.652712.com-西安多彩批发市场| www.828492.com-英国历史彩票最大奖| www.904940.com-竞彩足球彩票开奖| www.974507.com-下载福彩快三走势图| www.a22.net-600w彩票网下载| www.74gf.com-体育彩5d开奖结果| www.2442.cn-体彩排列3下期预测| www.601709.com-买彩票的悲剧| www.684699.com-福彩3d牛材网杀码| www.792786.com-异地买彩票怎么兑奖| www.871895.com-利彩开奖快3是否| www.965871.com-全发国际彩票黑不黑| 大赢家彩票平台www.507381.com| www.400616.com-七星彩第六位走势图| www.611281.com-彩虹世界下载网址| www.680937.com-白岩松彩票太假| www.763203.com-时时彩后一必中规律| www.831206.com-2019年四月足彩| www.901565.com-体彩5综合版| www.962434.com-随州福彩快三论剑| 财神网www.29277l.com| www.dw05.com-福彩销售终端机加盟| www.a53.top-买彩心得-| www.27ib.com-下载8号彩票| www.346559.com-彩81彩票apk| www.473675.com-牛彩网3d总汇| www.362108.com-印度乐透彩开奖结果| www.473873.com-福彩小军二版| www.548274.com-28彩平台-| www.608575.com-山西派彩每日推荐| www.679569.com-彩票了2元网走势图| www.755547.com-快乐彩5分钟| www.984370.com-走势图彩宝网专业版| www.ch26.com-快彩网是真的吗| www.ty65.com-彩票经典句子| www.16771.cc-辽宁福利彩票官网| www.577002.com-澳客网七星彩预测| www.26qf.com-安徽彩票11选5| www.94iv.com-易彩云是黑平台| www.ol01.com-彩票送彩金平台大全| www.112801.com-大众彩票会员计划群| www.583579.com-全民足彩彩票下载| www.677003.com-彩宝典彩票-| www.750728.com-天天中彩无码| www.828016.com-哪里下载吉彩宝| www.06fy.com-河北浩彩快三| www.84786.com-中国福彩3d综合版| www.621804.com-青蛙彩开奖现场直播| www.698568.com-浙江体彩怎么算中奖| www.772705.com-福彩彩宝网-| www.858045.com-快三是彩票吗| www.923362.com-彩票站晚上几点关门| www.984137.com-彩店宝彩票ios| www.fl03.com-97彩票下载手机版| www.wy79.com-苹果彩票下载| www.26ao.com-四川体彩金7宝约版| www.252.live-王牌彩票是骗局| www.2965.cc-福利彩票合买广告语| www.8183.in-乐讯吹吹七星彩首页| www.9518.vip-海南私彩中奖会跑吗| www.41688.cc-下载幸福彩手机报| www.381018.com-彩票开奖查今天| www.6605.top-977彩票ios版| www.731749.com-彩钢瓦围挡生产厂家| www.996885.com-北京七星彩-| www.fc22.cc-破解彩票程序| www.60sk.com-网易彩票认账吗| www.785537.com-2m彩票图库-| www.7769.org-七彩繁殖缸最佳尺寸| www.059059.com-甘肃快三走势带| www.630.me-彩乐网赛马会| www.933171.com-优彩网官网下载| www.998405.com-燕郊彩票站-| www.nc8.cc-排列三彩经网| www.rq60.com-广西快三一定牛今| www.25xa.com-体彩开奖公告历史表| www.239289.com-快三有赢钱的吗| www.565852.com-河南体彩481奖金| www.655772.com-爱彩彩网下载| www.826912.com-go彩票赚钱吗| www.917115.com-彩铅画风景画| www.996132.com-竞彩足球竞彩比分| www.ng3.com-一分快三走势图官网| www.oi77.com-彩票交流微信群| www.n89.org-玩彩如何止损| www.118799.com-哪个彩票最容易中| www.210771.com-老快三开奖号码遗漏| www.ve29.com-苏州福彩3d开奖号| www.64909.com-彩钢瓦围挡含立柱| www.57945.cc-福彩游戏规则| www.878435.com-自助彩票机怎么申请| www.st06.com-快三微信交流群| www.74eu.com-彩票号码计算方法| www.fv54.com-中国体彩5d结果| www.274620.com-智胜彩票-| www.335917.com-河北快三开奖规律| www.143590.com-长城彩票娱乐| www.97zg.com-什么是易彩票| www.25ef.com-中国福彩杀三码专区| www.384739.com-酷游彩票-| www.a79.club-彩票有几种-| www.253522.com-湖北快三遗漏360| www.350054.com-河南体彩兑奖流程| www.35827.com-头条彩票官网首页| www.10kc.com-彩票搞笑动态| www.1247.cn-吉林快三害人吗| www.320337.com-体彩7星彩开奖| www.484586.com-多彩网是不是合法的| www.570528.com-七彩云南歌词| www.635813.com-七彩娱乐云南麻将| www.694734.com-山东体育彩票吧| www.752277.com-体彩大乐透分析软件| www.818111.com-3d家彩网杀号| www.877648.com-彩迷本-| www.935010.com-体彩机器连接电视| 网易彩票www.078wy.com| www.501016.com-彩照出现时间| www.662041.com-南通竞彩网点查询| www.747852.com-红彩会手机版| www.793485.com-赚钱彩票软件下载| www.115536.com-彩铅画鹿图片| www.231358.com-湖北快三时间开奖| www.551711.com-周一福彩开什么| www.877092.com-福星图库台湾福星彩| www.305318.com-七星彩19040期| www.449620.com-网上不可以买彩票吗| www.786278.com-昨日彩票号码| www.870450.com-体育彩票店怎么开| www.979487.com-彩金列传完美通关| www.89tj.com-重庆时彩计划软件| www.324771.com-今日福彩三d新彩吧| www.398523.com-七星彩开奖准确时间| www.511637.com-澳门永亨彩票| www.580004.com-雅彩彩票客户端下载| www.631404.com-彩票最高多少倍|