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.974659.com-中华大彩票-| www.345.xyz-六爻测港彩生肖实例| www.5888.cm-长春体彩11选五| www.19176.cc-体彩竞彩网实时比分| www.66967.cc-在福彩中心工作| www.066173.com-重庆老时时采彩走势| www.137492.com-易彩网登录-| www.218096.com-亿彩彩票app| www.292990.com-福彩3d好彩网首页| www.367852.com-彩芽はる愛?緊縛| www.466031.com-500彩票安卓版本| www.557924.com-免费注册凤翔彩票| www.629620.com-188彩票软件| www.704504.com-快三彩票几点停售| www.786263.com-三彩网是什么| www.865580.com-彩票店主做庄| www.933633.com-江苏彩票网-| www.991169.com-cc彩票平台网址| www.di4.com-内蒙快三走势图儿| www.pw45.com-665彩票-| www.06nr.com-体育彩票003| www.77rf.com-全民彩票是合法的吗| www.1872.wang-q彩注册6位邀请码| www.9789.loan-七星彩的中奖方式| www.52457.cc-今晚3d东盛彩报| www.99068.com-足球360胜负彩| www.065820.com-双色球必赢彩票| www.177165.com-广西快三一定牛| www.252813.com-三d彩票红五图库| www.324785.com-彩票字谜图-| www.397458.com-今日彩票怪字帖| www.595690.com-异地彩票中奖| www.668651.com-华人彩票彩种| www.749464.com-彩票销售如何盈利| www.822504.com-福星彩软件-| www.892422.com-中国第一彩-| www.961647.com-彩票一般买哪种| 500彩票www.330265.com| www.ib44.com-安徽省福彩中心在哪| www.zq63.com-3d彩票开奖信息| www.28cm.com-四川彩票快乐12| www.0613.cm-天天竞彩-| www.7269.in-彩虹六号银行原型| www.20745.com-中国体育彩票竞彩官| www.63143.com-彩票新平台送钱38| www.033949.com-怎么破解高频彩规律| www.121940.com-体彩投注方法| www.192567.com-江苏快三精准预测| www.262682.com-吉林省福彩兑奖中心| www.366373.com-彩铅哪个牌子好上色| www.456902.com-体彩排列三字迷图迷| www.540125.com-彩票助赢论坛| www.659070.com-快三双和值遗漏数据| www.774216.com-七乐彩选号秘籍| www.884404.com-福彩3d五行和值尾| www.982941.com-微信可以玩彩票吗| www.qv85.com-湖北福利彩票快三| www.3rf.com-福利彩票的创始人| www.59ng.com-福彩专业版连线走势| www.0038.vip-竞彩篮球预测网易| www.7734.in-九彩拱北老人家相片| www.25122.com-彩铅画新手教程视频| www.67872.cc-棋牌彩票推广中心| www.038817.com-彩票中奖地区能查吗| www.123066.com-乐乐彩网址-| www.190208.com-快三到底坑了多少人| www.259355.com-体育彩票选号软件| www.326653.com-江苏爱彩票-| www.392051.com-关小刀足彩-| www.550489.com-博彩新论坛-| www.626945.com-万彩和彩票-| www.692881.com-福利彩票数字3单式| www.768409.com-电信彩铃-| www.869951.com-365彩票官方网站| www.947695.com-贵州体育彩票招考| www.997074.com-体彩开奖排列五| www.ad4.com-西宁快三今天开奖号| www.mq93.com-快3中彩网骗局| www.331524.com-天天中奖彩票app| www.450060.com-网赌彩票心得体会| www.567033.com-彩虹蓝底emoji| www.648473.com-彩票猫腻最大的是| www.773465.com-哪里可以合买彩票| www.857549.com-黑彩量刑标准| www.920353.com-充值36元买彩票| www.971316.com-七乐彩中奖概率最高| www.wj7.com-辽宁沈阳快三走势图| www.qp77.com-pc是福彩的一种吗| www.3dr.cc-热购彩票靠谱吗| www.53rr.com-如何做好福彩管理员| www.711.site-时时彩后二稳赢| www.4166.tv-鞍山七彩化学面试| www.8930.in-新彩网3地字迷大全| www.64648.cc-彩色塑料包装纸| www.019417.com-乐彩网下载安装| www.083621.com-双色球彩妹杀号| www.139811.com-合法足彩app| www.207528.com-内蒙快三开奖纟结果| www.273650.com-体育足彩玩法| www.385189.com-吉祥彩手机版下载| www.501326.com-中国体彩app苹果| www.567174.com-旺旺彩票app网站| www.628250.com-华彩赢家是做什么的| www.690252.com-竞彩足球今日单关| www.761495.com-七星彩解梦册查询| www.875078.com-极速时时采彩| www.949514.com-利彩票3d开奖公告| www.996604.cc-龙江福利彩票开奖号| www.cp6568.com-体彩浙江6+1| www.kl46.com-王牌彩票是违法的吗| www.zr60.com-中国足球竞彩| www.16rn.com-中彩票是什么感觉| www.337.name-学色彩搭配-| www.3188.xyz-福彩数字三结果| www.8283.top-福彩3d和值尾杀号| www.24502.com-彩铅一片樱花树画法| www.61509.com-大胜彩票苹果版| www.039371.com-牛牛彩票app下载| www.117943.com-体彩摇奖现场直播| www.179683.com-彩客网-| www.238260.com-河南省快三玩法| www.306299.cc-目前彩票最好的平台| www.365701.com-彩铅绘画图片| www.441388.com-彩钢瓦房顶造型| www.525592.com-什么彩票软件最可靠| www.708135.com-竞彩足球怎样分析| www.776365.com-时时彩五星一码公式| www.863006.com-体育彩票有那些| www.919242.com-时时彩平台搭建开发| www.974465.com-天牛3d彩票网| www.av15.com-官方江苏快三| www.pt04.com-珠江彩票-| www.0og.com-乐彩vip商城| www.44qi.com-河北快三营业时间| www.289611.com-体育博彩app| www.962596.com-跑马彩票全天计划| www.72365.com-云南省福彩网| www.552526.com-彩票主坛心水码| www.635750.com-时时彩app888| www.707038.com-快三分析真的吗| www.772753.com-时时彩稳赢投法| www.858004.com-博彩理财骗局| www.910347.com-海口快三走势图| www.964500.com-3分时时彩在线计划| 华人彩票www.hr3888.com| www.tm8.cc-安徽快三遗漏软件| www.na90.com-江苏11选5爱彩乐| www.x62.net-棋牌彩票娱乐排行榜| www.41aq.com-七星彩在线购买平台| www.96kr.com-网易彩票可以购买吗| www.1960.wang-九州体育博彩| www.6535.com-足彩19050冷热| www.07393.com-下载买福利彩票软件| www.41383.com-环球彩票是真的吗| www.77752.cc-北京市体彩管理中心| www.019950.com-四川体育彩票兑奖| www.077928.com-百乐彩客户端下载| www.128748.com-go彩砍龙团队| www.187099.com-北京快三中奖金额| www.240655.com-中彩娱乐正规吗| www.300978.com-白菜免费送彩金| www.358423.com-新宝彩票官网登录| www.427264.com-足彩爱美人微薄| www.509104.com-彩票导师计划骗局|