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.078804.com-七星彩兑奖彩票图片| www.097413.com-手机没电了买彩票| www.206788.com-黑彩彩票平台| www.978577.com-百福彩靠谱吗| www.ao38.com-彩票中奖查询大乐透| www.405090.com-彩铅房子风景画教程| www.535612.com-福利彩票出什么数| www.634871.com-建盏出彩图片| www.510648.com-彩虹屁文字表情包| www.e31.club-牛彩藏机图谜汇总| www.208559.com-彩票拉人专业术语| www.3496.vip-现金体彩网-| 68彩票www.68689r.com| www.qu24.com-崔永元谈彩票| www.09ig.com-m5彩票手机下载| www.047.biz-宝利彩票网怎么样| www.4433.bid-足球彩票好的app| www.769633.com-分分彩后三-| www.873429.com-中彩网大乐透推荐| www.962758.com-彩皇网我的注册| 500万彩票www.583792.com| www.lp08.com-全民彩安装-| www.x18.space-中彩网大乐透开机号| www.62gb.com-旺彩双色球开奖| www.020510.com-输入号码查彩票中奖| www.127430.com-日彩网-| www.273208.com-中国福彩发行原则| www.382960.com-丰隆彩旸香江价格| www.513982.com-南洋彩几点开奖| www.569249.com-天天送彩票app| www.283686.com-有没有六位数的彩票| www.374364.com-福彩3d高手有没有| www.480024.com-3d牛彩网官网| www.560689.com-超高彩票平台| www.780366.com-下载分分中彩| www.sz.com-吉林福彩-| www.245079.com-易彩网彩票官网| www.333978.com-体育彩票怎样玩| www.427098.com-双色球软件彩计划| www.582912.com-安徽快三综走势图| www.654821.com-焕彩二代气垫bb霜| www.776483.com-体彩三d中奖法| www.860186.com-天下彩票真的假的| www.932072.com-长春福彩中心电话| www.985865.com-福彩3d技术型| www.bp22.com-网易彩票网手机版| www.sg60.com-时时彩出豹子的预兆| www.a50.wang-彩票心得总结话语| www.127511.com-gv彩虹世界官网| www.579996.com-微彩排列五长条| www.870475.com-加盟彩票店怎么加盟| www.958873.com-湖北福利彩票新彩种| www.cai3744.com河南快三推荐| www.xf84.com-好彩3投注技巧| www.13fs.com-下载体彩彩票软件| www.014.me-福彩33期中奖号码| www.4396.biz-乐彩vip众乐下载| www.07167.com-正版福利彩票手机版| www.319219.com-江西快三遗漏情况| www.191984.com-河南福彩网快3预测| www.374935.com-体育彩票三等奖| www.297008.com-河北快三开奖统计| www.40sj.com-足球竞彩胜平负技巧| www.c72.top-百宝彩陕西快乐十分| www.0856.in-彩票扫码摇大奖| www.863138.com-河南智慧彩-| www.965406.com-玩极速快三的技巧| 日彩网www.rcw8855.com| www.lx88.cc-搜神传好彩妹剧照| www.764706.com-越南时时彩开奖结果| www.851013.com-公益彩票三d开机号| www.908161.com-博通彩票app| www.967129.com-河南快三一走势图| www.an62.com-大发快三软件下载| www.sr71.com-七乐彩预测最准号码| www.09sr.com-七星彩摇奖机简介| www.hv58.com-三分彩票是不是假的| www.079825.com-福彩3d之新彩网| www.181273.com-安徽快三复式玩法| www.623185.com-彩票怎么没人造假| www.7xz.com-体彩排列3奖金| www.91my.com-十三国际重庆时时彩| www.3533.net-彩票49倍-| www.18336.com-竞彩足球跟单广告语| www.60446.com-网易购彩可靠吗| www.757272.com-彩票号码统计软件| www.977956.com-杭彩包装-| www.bs88.com-彩票缩水专家app| www.p42.bid-黑彩服务器在国外| www.52fh.com-高清水彩花卉图片| www.0596.tv-福彩彩票快3| www.053710.com-彩票提不了现| www.202358.com-黔南州福利彩票中心| www.317367.com-新彩心得-| www.390024.com-彩经彩票邀请码| www.682565.com-福彩3d何老大字谜| www.750351.com-手机在线购彩票| www.805863.com-福彩刮刮乐图片| www.870432.com-易旺彩票邀请码| www.927848.com-6位数的彩票有哪些| www.977133.com-306手机彩票网| www.cai45.cc-快三吉林-| www.78221.cc-福彩3d选号号方法| www.245339.com-易彩快网址-| www.330593.com-掌上购彩七天彩下载| www.8885.gg-2010世界杯足彩| www.19933.cc-华军彩票大赢家软件| www.01876.cc-什么网站有彩金送| www.62885.cc-万彩吧彩票推荐号| www.014321.com-7星彩今天预测号码| www.540858.com-159竞彩版-| www.706086.com-聚星彩票安全吗| 500彩票www.26299c.com| www.cai8244.com广西快三中奖规则| www.659664.com-金牌彩票-| www.826237.com-933彩票版-| www.904298.com-彩票代理能赚钱吗| www.965360.com-彩票追加什么意思| 68彩票www.68689g.com| www.985509.com-彩票2元网首页官网| www.567782.com-濠江彩票与神童彩开| www.988761.com-时时彩改号技术代码| www.bk82.com-彩票106cc苹果| www.26no.com-华彩人生新版| www.1655.cm-足彩大小球升盘降盘| www.54ed.com-买足彩app哪个好| www.058959.com-新浪体育彩票网| www.100508.com-百乐彩票用户登录| www.166748.com-江苏快三大小计划| www.254277.com-彩票十分钟开奖号| www.319393.cc-网易彩票开奖直播| www.353982.com-今天3d彩图-| www.457737.com-恒彩平台地址| www.551533.com-福彩快乐彩概率| www.612605.com-香港万彩吧彩票| www.673192.com-河南418彩票| www.730327.com-内蒙福利彩票| www.791248.com-彩票开奖结果怎样看| www.862624.com-七乐彩开奖查询今天| www.915035.com-体彩屋app邀请码| www.967242.com-专业彩吧助手走势图| 9928彩票www.9928m.com| www.286428.com-玩彩的胆神独胆| www.554806.com-七星彩组合多少注| www.615716.com-体彩机操作方法| www.243011.com-福彩快3计划网| www.96at.com-鸿彩网邀请码是多少| www.6039.net-云南竟彩体育彩票| www.219582.com-3彩彩票官网| www.147855.com-体育彩票网站| www.283133.com-澳门六星彩怎么买| www.262465.com-吉林市彩票开奖查询| 500彩票www.26299p.com| www.979757.com-快三玩法规则| www.206617.com-福彩网app快3| www.084210.com-彩票下载ios| www.91733.com-中彩那天课文分析| www.053097.com-赢彩网江苏快三| www.128356.com-新2官网彩票| www.986325.com-彩吧助手3d试机号| www.75bi.com-福彩3d形态图| www.9638.in-彩票历史开奖走势图| www.254715.com-甘肃快三技巧与规律| www.72oj.com-福彩天外飞仙3d|