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.tr74.com-彩之家是正规的吗| www.1292.win-七乐彩奖池哪里查| www.31008.com-彩票一等奖p图| www.006260.com-彩37官网下载| www.146800.com-竞彩篮球开奖结果| www.692381.com-广东彩王准确资料| www.796490.com-腾讯分分彩全天号码| www.894670.com-彩票速中法-| www.974109.com-彩票节目-| www.jt7.com-河南福彩智慧彩| www.35784.com-时时彩合买大厅网址| www.099865.com-最新九州彩票网址| www.99608.cc-福彩电话投注方法| www.110596.com-河北福彩快三推荐号| www.990115.com-布衣天下图库多彩网| www.su34.com-体彩玩法有哪些| www.44dv.com-武威快三开奖结果| www.2011.cm-彩虹6号围攻高级版| www.8911.cn-乐八彩票app下载| www.434242.com-98彩票登录路线| www.322527.com-808福彩是骗局吗| www.947568.com-彩票诈骗案-| www.jb89.com-足彩胜负比分直播| www.76bk.com-最稳的彩票-| www.27217.com-快三平台充值不上| www.80gv.com-二分钟快三计划| www.22759.cc-微信怎么买3d彩票| www.717065.com-彩铅和线描哪个先学| www.481113.com-香港陆和彩开| www.23vc.com-好彩网是谁创建的| www.234525.com-彩票app软件| www.963646.com-足彩直播比分直播| www.333451.com-体彩怎么玩-| www.583167.com-百位杀号彩经网| www.795113.com-线上福彩-| www.968006.com-胜负彩超级必发指数| www.0980.net-联众彩票是正规的么| www.514140.com-xs原彩要不要开刀| www.87890.cc-三分彩app下线| www.165879.com-芜湖市体彩中心地址| www.276857.com-盈彩网买彩票合法吗| www.356724.com-和彩济南-| www.568205.com-彩票51中彩靠谱吗| www.887361.com-买福利彩票算赌博吗| www.896122.com-足彩合买微信群| www.405357.com-七星彩19018| www.343922.com-红旗彩票官网电脑版| www.6362.biz-春彩彩票登录| www.641896.com-体育彩票柜台图片| www.084479.com-鑫源彩彩票网地址| www.911112.com-张家口快三-| 华亿彩www.cai002.vip| www.118773.com-体彩站加盟-| www.234404.com-怎样通过手机购彩票| www.416848.com-竞彩多长时间开奖| www.715597.com-新3d体彩违法吗| www.803520.com-体彩6十l开奖结果| www.898645.com-今天3d彩民乐树图| www.974948.com-体彩大乐透奖金纳税| www.qa81.com-合乐彩票app下载| www.3688.gg-预知彩票-| www.42288.com-qq彩色名称-| www.020145.com-四川体彩手机投注| www.mt90.com-彩6苹果版下载| www.7768.me-青岛福利彩票站| www.31331.cc-体彩预测专家预测| www.130897.com-重庆时时彩骗局曝光| www.233178.com-黑龙江体彩网大乐透| www.344789.cc-彩票中奖需要福报| www.886668.com-丹东福彩双色球杀号| www.67ir.com-阳泉体彩管理中心| www.818120.com-19025胜负彩| www.900126.com-彩22平台下载地址| www.866493.com-福彩3d出啥号码| www.933119.com-惠民彩票是黑平台| www.993486.com-足彩开奖时间每天| www.tt32.cc-你千万彩票大奖| www.25tu.com-创意彩票海报| www.958051.com-快三123走势图| www.99bt.com-彩虹六号黑卡店铺| www.3863.in-足彩胜负开奖公告| www.9169.biz-美国福利彩票| www.5186.live-玉林体彩发行中心| www.546198.com-体彩网点检测报告| www.641060.com-体育彩票竞彩图案| www.ir05.com-5360彩票-| www.58nu.com-欠债买彩票中奖| www.055553.com-极速快三在线| 爱彩乐www.754918.com| www.839905.com-责任彩票认知篇| www.904196.com-鸿运来彩票网| www.970292.com-ag博彩-| www.cp2345.com-百盈快三的技巧规律| www.601630.com-想挣点零花钱买彩票| www.896679.com-彩票对刷打偏骗局| www.965427.com-百盈快三和值| 500彩票www.195237.com| www.5030.in-彩乐园lll-| www.77rc.com-双色球五行预测彩票| www.299979.com-彩票看走势软件| www.019933.com-失信可以领取彩票| www.167297.com-北京快三一定牛| www.922763.com-彩票店能过户吗| www.985487.com-今日足彩竞彩分析| www.af35.com-手机彩票体彩福彩| www.649119.com-七彩辣椒种植| www.559689.com-云彩宝彩票苹果版| www.627355.com-中彩快三源码| www.684511.com-五分快三人工计划网| www.757111.com-创富彩票提现失败| www.sq93.com-时时彩打法技巧| www.9lc.com-59博彩论坛网址| www.jy24.com-天天彩票-| www.828890.com-盗窃中奖彩票| www.205388.com-大发快三要怎么玩| www.25815.cc-体育彩票在线直播| www.597123.com-意大利彩金项链价格| www.17858.cc-明彩彩票-| www.6sf.cc-世界杯足彩胜负玩法| www.27099.com-p3开奖结果乐彩网| www.30538.com-江苏体彩7位数开奖| www.81232.com-极速赛车彩票坑人吗| www.957466.com-北京体彩兑奖地点| www.36573.cc-澳门彩票赌网站大全| www.169100.com-江苏体彩十一选五| www.237054.com-中国竞彩网计算器| www.028784.com-体育彩票开奖| www.400368.com-快乐五分彩怎么玩| www.55123.com-谁有彩票送彩金的| www.374558.com-彩虹六号刘醒的枪| www.8325.cn-福彩代销证怎么办理| www.72792.cc-辽源彩票站出兑| www.026163.com-彩票平台刷佣金| www.752857.com-彩牛美缝剂-| www.869032.com-11选5彩票牛人| www.938723.com-亿彩彩票app登录| 大福彩票www.df76.com| www.o10.in-体彩三d走势图| www.76xa.com-彩88彩票授渔看彩| www.139434.com-下载彩83官方| www.321844.com-彩8预知软件| www.571208.com-743.cc好彩-| www.695922.com-足彩复式价格| www.7cw.cc-公司送彩票608万| www.314666.com-时时彩五星一码必中| www.nk91.com-佬牛足彩推荐| www.398070.com-福彩票开奖公告查询| www.507192.com-怎样在百度买彩票| www.6377.in-彩票六等奖-| www.954043.com-快三必中网站| www.ca50.com-湖北福彩快三输钱| www.943789.com-703彩票链接| www.958832.com-彩票节后什么时开售| www.sp.cc-快3彩票下载安装| www.61916.cc-领航彩下载-| www.628126.com-看桂林彩调-| www.6826.org-今日欧联杯分析竞彩| www.19984.com-河南体彩快三| www.58691.cc-福彩3d天中原创布| www.47eg.com-体彩店面装修图片| www.gm2.cc-快三开奖网站| www.67ja.com-彩票店合作或转让| www.135204.com-彩票应用软件| www.493290.com-热购彩票网址|