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天

知道了
9彩注册 www.190891.com-人人中彩票一直维护| www.341748.com-qq赌快三的群| www.437445.com-陕西省福彩中心人员| www.539441.com-全球彩票产业| www.650363.com-彩虹伞打地鼠视频| www.089.me-排例五走势图彩宝贝| www.90ur.com-怎么买大发快三和值| www.322401.com-彩票平台无损刷流水| www.410226.com-丰大彩票官网注册| www.522901.com-博彩打水-| www.661421.com-日本彩票30秒开奖| www.744750.com-趣头条彩票官网登录| www.822110.com-中福在线彩票害人啊| www.899903.com-福利彩票投注站申请| www.970523.com-河北福彩排七| www.14oq.com-河内2分彩玩法| www.176.in-彩客让球胜平| www.678824.com-易彩网双色球走势| www.799967.com-33cc彩票网站| www.880421.com-七乐彩奖号-| www.953188.com-新加坡乐和彩网站| 万利www.32123h.com| www.365390.cc-福彩精英免费预测| www.533914.com-明发彩票mfa| www.761441.com-手机体彩app投注| www.912912.com-彩票图表走势图| www.402111.com-重庆时时采彩下载| www.585502.com-发大财彩票平台| www.717099.com-水彩笔品牌排行| www.850591.com-今天3d彩民乐钱途| www.956172.com-速盈彩票网站| 天天乐彩票www.126293.com| www.535908.com-中彩票后很低调| www.629408.com-993彩票正规吗| www.713195.com-体彩大乐投开奖时间| www.799709.com-天天彩票送彩金| www.883288.com-鸿彩网可靠吗| www.50ja.com-狗万足彩-| www.3420.biz-好彩酒楼江北店地址| www.18657.cc-苏州快三开奖走势| www.066913.com-线上博彩靠谱| www.160797.com-北京体育彩票app| www.254480.com-好彩网登录-| www.344686.com-武汉体彩-| www.451986.com-齐乐彩走势图| www.562611.com-亚洲城签到送彩金| www.660100.com-手机怎么买快三彩票| www.791879.com-快三庄家输-| www.868365.cc-7星彩走势-| www.963702.com-彩客网下载安装| www.cai5559.com安徽快三害了多少人| www.ob92.com-赢一彩天下-| www.06zj.com-体彩佣金包括什么| www.75nj.com-今天3d家彩开机号| www.1312.tv-国乐彩网址-| www.384.cm-领彩网论坛-| www.6766.pw-一分钟赛车彩票官网| www.456403.com-彩易达出租-| www.603756.com-977幸运彩票| www.690801.com-中国体育体彩公司| www.775365.com-时时彩回本心态| www.842189.com-体彩为什么没有中超| www.911902.com-彩世界app苹果| www.973947.com-七天彩苹果-| www.dh60.com-众赢彩票骗局| www.0vd.com-乐彩三地17500| www.76vf.com-福彩刮刮乐印刷厂| www.388178.com-星空彩票安全吗| www.581095.com-qq彩票平台-| www.666235.com-航天彩虹股票股吧| www.775968.com-酷彩网官方网站| www.855413.com-七乐彩奖金有多少| www.928686.com-百宝彩走势图下载| www.987212.com-中彩彩票安卓版| www.bg47.com-重庆快三走势图| www.p50.biz-体彩所有玩法| www.92oj.com-福利彩票胆拖玩法| www.65150.com-西宁福利彩票领奖处| www.074888.com-福彩百度贴吧| www.143434.com-体彩排列三预测软件| www.237282.com-纵横彩票-| www.325233.com-福彩三d组选怎么买| www.397400.com-对联足彩篮彩数字彩| www.511489.com-五洲彩票娱乐注册| 网易彩票www.07163p.com| www.pf96.com-玩吉林快三抽水| www.36dm.com-彩票购买支付宝账号| www.0543.date-657彩票什么网站| www.6782.xyz-彩票76真假-| www.14497.com-七星彩头尾一赔几多| www.295177.com-彩票开奖查询排列3| www.439213.com-彩圣网免费资料大全| www.555869.com-香港五分彩开奖号码| www.633322.com-足彩258球迷| www.711097.com-国内足彩狙击团队| www.795091.com-至尊彩官网-| www.877033.com-彩票检测-| www.970262.com-ag彩數據-| www.qe08.com-快三福建开奖结果| www.10sy.com-福利彩票意义| www.72pj.cc-福彩3d蓝精灵a| www.70fx.com-红菜苔彩票提不了现| www.96wf.com-体彩排五结果| www.771515.cc-时时彩五星固定五码| www.0376.me-休闲快三花样| www.044467.com-福彩门户网址是什么| www.uy68.com-福彩3d新彩吧字谜| www.23ep.com-幸运彩票提不了款| www.048.biz-快三彩票是否合法| www.3523.cn-彩六118版本| www.8325.cc-福利彩票销售经费| www.24591.com-彩铅风景画春天| www.059009.com-中国体育彩票走视图| www.263397.com-优彩彩票是正规的吗| www.407304.com-七星彩2元走势图表| www.509111.cc-叶随风体彩现场开奖| www.691580.com-3d福星福彩推荐| www.781388.com-百乐彩娱乐平台| www.863197.com-彩票挂机软件怎么用| www.931549.com-天吉彩票论坛3d| www.974682.com-七星彩36期开奖| www.9360.vip-彩票幕后的真相| www.34861.com-三d彩报图片| www.70128.com-大钱庄彩票主页| www.022528.com-分分彩单双稳赚| www.089945.com-亚博体育彩票怎么样| www.154672.com-足彩贴吧-| www.226492.com-福利彩票发行历史| www.301380.com-万彩吧资料下载| www.358718.com-体彩一票后两位数| www.441090.com-七星彩直播间| www.519125.com-网投六个彩在哪里投| www.576181.com-正版资料丨牛蛙彩票| www.632252.com-500快三彩票| www.686748.com-中彩票人结局据调查| www.750877.com-吉林快三推荐和值| www.803998.com-足彩胜负彩开奖公告| www.866135.com-今天五星彩开奖结果| www.916607.com-黑客攻击黑彩网事件| www.977834.com-彩印纸箱生产设备| www.pj50.com-竞彩比分值播| www.0iy.com-大发快三时时彩计划| www.53oy.com-彩票达人下载安装| www.943.me-网易体彩开奖直播| www.4889.cc-中彩网首页i| www.00740.com-福彩预测形态| www.745164.com-c02彩票登录平台| www.965356.com-彩票的阿基米德猜想| 大赢家彩票平台www.810730.com| www.le20.com-彩票坊专业购彩平台| www.6tm.com-网易彩票结果查询| www.56bo.com-兴义市福彩中心地址| www.2227.in-智能彩票摇号软件| www.6976.cn-时时彩后二规律技巧| 500万彩票www.5441v.com| www.49226.com-安然彩票专栏| www.cai9233.com兰州快三一天多少期| 购彩堂www.576734.com| www.rb90.com-彩票平台自己的彩种| www.11698.cc-体彩排三推荐汇总| www.45333.com-网上微彩是合法的吗| www.006524.com-今晚七乐彩开奖号码| www.101809.com-红彩是什么-| www.183792.com-燕赵福利彩票网首页|