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.9996.date-淘彩票客户端下载| www.004719.com-七乐彩最新开奖结果| www.101634.com-500万彩票网首页| www.b15.me-关于拉长彩票| www.58gu.com-会员登录_顶级彩票| www.3283.win-聚彩彩票平台登入| www.8997.cc-乐和彩竞彩-| www.is3.cc-内蒙古快三直播现场| www.s15.com-彩868网-| www.54na.com-体彩大奖排行| www.1325.vip-福利彩票广告| www.520333.com-合乐彩票是真是假| www.826219.com-14号彩票-| www.907201.com-买十二生肖彩票| www.972042.com-印尼五分彩票| www.cai5674.com彩票开奖-| www.sw18.cc-网上跟导师买彩票| www.67767.com-如何举报彩票平台| www.896119.com-洛阳彩票合买| www.991667.com-安徽福彩快3官网| www.cw92.com-431彩票-| www.076757.com-彩票数字几位数| www.210769.com-银川快三开奖| www.567314.com-江苏福彩七乐彩规则| www.680863.com-35彩票平台怎么样| www.770947.com-彩之家怎么样| www.851557.com-网易彩票还能买| www.920497.com-幸运一分快三是什么| www.978430.com-u9彩票app下载| www.cp2700.com-江苏快三彩票合法吗| www.973054.com-彩虹世界app免费| www.jt2.cc-快三最大遗漏号| www.525276.com-湖北体彩快3| www.610722.com-中福快三能赢钱吗| www.685448.com-双彩球开奖结果16| www.761281.com-乐彩网3d试机号| www.829901.com-132彩票软件| www.896886.com-快乐双彩综合走势图| www.963040.com-体彩顶呱刮运8| www.603921.com-职业彩票玩家生活| www.688928.com-人人快三安卓客户端| www.776294.com-时时彩龙虎具体玩法| www.854117.com-01vip彩票下载| www.920275.com-昨天快三-| www.976676.com-焦作结婚彩礼| www.cp9557.com-中彩网是正规网站吗| www.6938.org-微讯彩票网app下| www.24762.com-星空樱花树彩铅画| www.174811.com-网上怎样玩快三| www.60bw.com-腾讯分分彩定胆方法| www.881705.com-投彩骗局-| www.265228.com-福彩五分钟一期的| www.uf05.com-彩票开奖甘肃快三| www.91ia.com-辉煌福彩-| www.375447.com-海南福利彩票开奖| www.566915.com-二四六好彩免费资料| www.719397.com-彩吧助手官网下载| www.827996.com-小站宝彩票客服| www.938893.com-快三开奖作弊器| www.kw54.com-玩快三犯法吗报警| www.75zy.com-福彩三d天罡八卦图| www.8938.org-乐玩彩票提款| www.66656.com-足彩8串1冷门| www.108544.com-速赢彩国家不管| www.182318.com-足彩胜负-| www.325281.com-彩票太湖字谜41| www.518441.com-福彩主任上级是| www.87sn.com-福彩提成多少| www.50dv.cc-江苏虚拟足球竞彩网| www.61177.com-网售彩票怎么举报| www.960545.com-快三和值啥意思| www.fg60.com-易彩快三有何规律| www.1ns.com-合肥福彩店出租转让| www.566.red-河內五分彩在线计划| www.917.com-x星彩-| www.483828.com-好彩客手机版下载| www.nz11.com-头彩网江苏快3| www.72kk.com-中国竞彩篮球cba| www.34002.com-七星彩的开奖规则| www.p95.net-博大彩票注册| www.106953.com-500竞彩足球网| www.954061.com-彩票计划员是庄家| www.005073.com-福利彩票最近走势图| www.115331.com-移动彩票财务清算| www.357474.com-青岛福彩中心主任| www.198964.com-玩彩怎么玩-| www.444622.com-名人彩票-登录页面| www.kh28.com-网上怎么样买快三| www.76zm.com-重庆彩票站申请电话| www.388670.com-重庆时时彩停销| www.303139.com-关于苏州快三| www.812861.com-手机彩铃-| www.536859.com-福利彩票分为哪几种| www.9353.org-福利彩票造假新闻| www.130515.com-江苏快三作弊器价格| www.414442.com-盈众彩票合法吗| www.2444.cn-江苏快三冷号查询| www.110247.com-福彩三d速查表| www.302776.com-中华彩票网主页| www.567318.com-安徽22期快三开奖| www.043.net-彩票手机购彩客户端| www.604655.com-60彩票安装-| www.842306.com-福彩30周年纪念| www.3174.biz-体彩7星彩中4连号| www.859628.com-彩票99网-| www.dm38.com-乐和彩官网-| www.625919.com-什么叫单关彩票| www.838568.com-竞彩冷门凯利模型| www.a82.club-巨彩彩票app下载| www.x20.org-重庆时时彩杀码软件| www.388316.com-华彩联合支付宝团队| www.679699.com-如何才能戒掉彩票| www.3614.net-连红彩票下载| www.805865.com-体育彩票大乐透开将| www.135137.com-晚晚彩票-| www.321498.com-明发彩票下载| www.456294.com-红菜苔彩票ios| www.r65.net-9万彩票官网| www.088882.cc-彩票联盟是真的吗| www.183688.com-福彩快三奖金一览表| www.289998.com-3d字谜牛彩网彩| www.560045.com-彩站宝下载-| www.73zl.com-公益中华彩票网| www.047977.com-福彩3d东北王图迷| www.550201.com-福彩扫码兑奖二维码| www.719786.com-七星彩手机选号| www.878837.com-江西体彩中心地址| www.sc93.com-竞彩500即时比分| www.85676.com-蓝彩-| www.324708.com-福彩官员落网| www.4688.top-彩票跟那期好| www.652323.com-上海十分彩-| www.si62.com-时时彩4星走势图| www.345858.com-福彩门户爱资料大全| www.586464.com-澳门bh送18彩金| www.dy05.com-福彩快三正规网站| www.469153.com-r8国际彩票app| www.555353.com-福利彩票数学3单式| www.73xu.com-好彩客苹果下载不了| www.623675.com-财富专业复式福彩| www.666060.cc-新加坡彩票类的工| www.899669.com-c?81彩-| www.75981.cc-7号彩票网址| 大赢家彩票平台www.369053.com| www.3580.com-天天快三福气快三| www.92971.cc-1博彩票下载安装| www.02567.com-彩票上的字体| www.593337.com-竟彩计算机器| www.978491.com-福中彩票下载安装| www.083190.com-六亿彩票分分秒秒开| www.459838.com-福彩3d寒香宫断组| www.3701.vip-福利彩票7注彩| www.096791.com-彩票行家推存资料| www.296335.com-内蒙古快三开奖视频| www.817543.com-揭露网络彩票骗局| www.0800.cc-足彩去哪投注| www.63hk.com-润金店彩金能回收吗| www.113346.com-彩票五行属于什么| www.86258.com-500彩票足球竞彩| www.666917.com-重庆时彩违法吗| www.993906.com-我想玩彩票-| www.154529.com-博雅彩票登录| www.663863.com-实时彩规律-| www.109976.com-快三中俩号有钱吗|