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.017595.com-六亿彩票网站| www.560014.com-彩票购客户端| www.652820.com-49彩票登录-| www.762106.com-篮彩推荐app| www.840024.com-河南省福利彩票网| www.686819.com-中彩那天的生字| www.248648.com-澳门彩票公司手机版| www.46rs.com-机打彩票设备| www.2443.vip-福彩三d开桨结果| www.9531.space-四位数彩票-| www.53892.com-新浪彩票客户端下载| www.030389.com-福利彩票真假问题| www.188403.com-福彩快三安徽| www.527009.com-时时彩三码定位技巧| www.445332.com-专业玩彩票开| www.860428.com-广西移动手机福彩| www.83499.com-91计划彩票下| www.079615.com-飞鱼体彩-| www.395231.com-昨天福彩开什么| www.211160.com-安徽安徽快三走势图| www.305185.com-海南今天七星彩预测| www.587355.com-昨晚彩票开奖结果是| www.888632.com-互联网彩票最新政策| www.23199.cc-快三长龙提醒软件| www.616891.com-足球胜负彩推荐填单| www.792848.com-阜阳市彩票兑奖中心| www.946953.com-耐磨彩色混凝土地面| www.ij61.com-网上买福利彩票软件| www.4275.cn-挂牌玄机彩图| www.023629.com-七彩乐开奖时间几点| www.235827.com-福彩快3三新快三| www.195388.com-竞彩店申请条件| www.19wj.com-51彩票快三登录| www.553.cm-易购彩手机版| www.32271.com-百福彩是骗人的吗| www.bq51.com-888彩票app-| www.6208.cm-红旗彩票怎么注册| www.080961.com-大吉彩票网怎么样| www.201426.com-彩票投注平台| www.345627.com-湖北福彩中奖号码| www.478575.com-深圳福彩官方网查询| www.b76.club-南昌市福彩中心地址| www.309626.com-体育彩票直选3| www.09766.com-赛车彩票是真是假| www.35346.com-福彩彩票高手交流群| www.550182.com-6678彩票主页| www.xt03.com-好想中彩票买部车| www.zc94.com-体育彩票一定牛安卓| www.055853.com-富彩网是正规网站么| www.907197.com-彩票大本营生肖表| www.40422.com-休一彩体育彩票| www.35pd.com-在香港哪里买彩票| www.041062.com-分分彩稳定长期挂机| www.410489.com-七彩球视频-| www.110087.com-体彩北京领奖地址| www.233799.cc-中彩网登录-| www.365310.cc-体彩建行充值| www.517668.com-迷彩彩票论坛| www.0664.xyz-app-5星彩-| www.rp3.com-彩神88下载-| www.759780.com-3分时时彩开奖官网| www.100876.com-甘肃快三一天多少期| www.86qp.cc-博猫1分彩-| www.983800.com-北京快三的预售时间| www.944449.com-百万彩票合法吗| www.sa7.com-南方双彩网专家预测| www.695765.com-竞彩8串9容错几场| www.768076.com-惠普彩色打印机卡纸| www.845908.com-江苏快三有赢钱的不| www.911113.com-k彩测速线路| www.972879.com-足球竞彩客网| 乐彩网www.lcw997.com| www.fa26.com-体彩开奖福彩| www.h69.club-澳洲高频彩票5分彩| www.48jd.com-梦想彩店平台| www.xw03.cc-春天彩票app| www.23gd.com-万彩吧彩吧开奖查询| www.555553.com-三吉彩花-| www.309726.com-延吉福利彩票中心| www.388915.com-体彩开奖公告历史表| www.511504.com-中国福彩18年销量| www.575672.com-福彩74期开奖结果| www.87264.com-福彩3d大神-| www.0942.com-内蒙古快三开奖链接| www.706232.com-中国竞彩网首页计算| www.503161.com-体育快开彩票中奖| www.746239.com-万人炸金花彩票| www.868929.com-彩票王成周现状| www.952640.com-上海快三大小计划| www.cp163.cc-贵州福彩助残| www.149948.com-体彩11选5官网| www.315350.com-彩96平台-| www.526561.com-彩票开奖宝百度| www.639413.com-为什么买竞彩总是输| www.891006.com-至尊彩网址登录| www.444444.cc-体彩个位振幅走势| www.96872.com-海南私彩合法吗| www.2233.live-排列三彩报第二版| www.956337.com-七星彩开奖记录列表| 华彩www.71399r.com| www.742884.com-能成功提现的彩票| www.67ol.com-彩金用收米的app| www.33615.com-网络时时彩诈骗案| www.279306.com-分分时时彩官网下载| www.323635.com-七乐彩开奖奖金多少| www.455166.com-金冠彩app-| www.86985.cc-体育彩票aqq| www.121741.com-陕西福利彩票网| www.062625.com-牛彩3d图谜汇总九| www.811803.com-乐彩的官方网址| www.883953.com-破黑彩的破解器| www.88kw.com-大庄家彩票网| www.2207.org-求购彩票套源码| www.21371.cc-分分彩是如何坑人的| www.99531.com-福建体彩十一选5| www.067556.com-彩票机怎么出假票| www.356112.com-公益体彩宣传语图片| www.511632.com-超级时时彩软件| www.596683.com-快三笫一门户| www.675585.com-最近中彩票的号码| www.775556.cc-彩富网之旺角彩票| www.849486.com-淅江体彩6十1规则| www.918187.com-一分时时彩是私彩么| www.990155.com-彩票888下载软件| www.12eo.com-柬埔寨5分钟彩| www.93kt.com-彩色拍照-| 网易彩票www.07163v.com| www.24sy.com-彩票官网手机端| www.291918.com-福彩5d全买-| www.608400.com-注册送彩金28| www.675581.com-36σ全国彩票开奖| www.733235.com-试机号走势图彩宝网| www.802204.com-云南省福彩网| www.870697.com-如何选择双色球彩票| www.932037.com-犀牛彩票8-| www.983575.com-广东福利彩票领奖处| www.cp0363.com-快三跨度表-| www.pm94.com-今日福彩3d玄机图| www.832799.com-福彩3d定独跨| www.6259.shop-彩影手机版官网| www.796906.com-彩票中奖走奇门下载| www.900682.com-注册就送彩金| 91彩票www.9155e.cc| www.hr82.com-五百万彩票网资讯| www.5510.vip-新昌双彩茶苗| www.yr76.com-山东体彩扑克开奖| www.619050.com-重庆体彩票兑奖地址| 爱彩www.00ac.com| www.905132.com-亿彩彩票是不是有托| www.6593.net-姓名选彩票-| www.344420.com-今晚福彩票中奖现场| www.274889.cc-快三开奖贵州快三| www.362090.com-广东快乐十分彩玩法| www.429738.com-足彩哪个靠谱| www.513596.com-时时彩6注必出后二| www.577672.com-网络买彩票合法吗| www.640007.com-七星彩奖虫下载| www.696920.com-彩神不能提现| www.767349.com-长治福彩网点| www.845659.com-泰国彩票中奖要求| www.901775.com-举报黑彩庄家| www.960629.com-933彩票软件下载| 500彩票网www.61655h.com| www.kq38.com-彩票团队带赚导师群|