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.222434.com-兼职彩票赚钱| www.339574.com-彩票中奖了去哪兑换| www.454597.com-福利彩票胆拖什么算| www.557922.com-大赢家彩票是什么| www.634331.com-盈彩彩票手机版下载| www.877544.com-打开彩票开奖| www.970584.com-下载彩票走势大全| www.sa8.com-彩神88-| www.rt35.com-乐彩下载app| www.04ch.com-彩票理论知识| www.68kf.com-网易体彩是真的吗| www.0629.net-下载新淘彩-| www.02701.cc-什么是彩蛋-| www.59311.com-彩虹鞋-| www.020747.com-什么叫基诺彩票| www.095954.com-现在买彩金的人多吗| www.167572.com-黑龙江快三开奖结果| www.277660.com-体彩11选5开奖| www.365862.cc-竞彩猫直播预测分析| www.462546.com-福彩主任死刑| www.555434.com-c53彩票-| www.638139.com-色彩画静物-| www.779981.cc-智能彩票神器| www.860206.com-时时中彩票手机平台| www.930128.com-1980彩票注册| www.990260.com-乐玩彩官方下载| www.yc2.com-福彩极速快3能玩吗| www.za83.com-福彩3d神奇四码| www.28nf.com-顺发彩票手机| www.0037.xyz-买彩票写几位数| www.6573.bid-福彩3d16788| www.17702.cc-胜负彩十四场专家预| www.65755.cc-彩票模拟摇号机| www.042350.com-广东省福利彩票开奖| www.128752.com-福彩都有哪些玩法| www.204297.com-中彩票两亿的小说| www.277584.com-天空彩-| www.381472.com-七乐彩全部开奖号| www.506519.com-彩天地app下载| www.579414.com-港彩一定中资料| www.654279.com-风之彩是传销窝点吗| www.801368.com-福利彩票复试怎么买| www.872370.com-江西福彩自助| www.972424.com-菠萝彩手机版| www.cp5552.cc-五分快三开奖结果| www.nc78.cc-双色球彩票开奖查询| www.3op.com-53彩票购彩网址| www.61ja.com-爱投彩票是真的假的| www.0533.xyz-河北彩未图片| www.8338.in-东方彩票是违法吗| www.30174.com-重庆大快三下载安装| www.73561.cc-本期七星彩预测定位| www.024142.com-分分彩稳定挂机方案| www.096978.com-彩吧论坛天齐网首页| www.161399.com-广州36选7福彩| www.296935.com-乐购彩票能不能报警| www.367529.com-正宇火箭彩票app| www.456781.com-六今彩幵码结果| www.546813.com-体育彩票代理政策| www.659420.com-体彩七星直播| www.745844.com-808福彩网址| www.816323.com-福彩北京pk-| www.886856.com-彩61平台-| www.976268.com-郑州市区彩礼多少钱| www.cp8386.com-新手适合买什么彩票| www.mp35.com-时时彩概率科学买法| www.w84.cn-体育彩票每周几开奖| www.50tr.com-和彩票有关的软件| www.722.xyz-时时彩怎么倍投盈利| www.4549.cn-七星彩100走势图| www.9730.loan-重庆时彩个位技巧| www.71597.com-太原福彩怎么样| www.029039.com-彩神8真假-| www.101374.com-希腊5分彩开奖号码| www.165480.com-1688彩票下载| www.264631.com-网上怎么买快三| www.347883.com-福彩双色球奖金计算| www.422399.cc-福彩双色推荐号码| www.518047.com-双色球彩指南电子报| www.585438.com-彩票营销-| www.655080.com-海南彩票七星彩下载| www.776418.com-大乐透网上购彩| www.860924.com-今天七乐彩开奖号码| www.923069.com-手机108彩票软件| www.977888.com-足球竞彩心得| www.nw4.com-怎样玩快三会赚钱| www.qp21.cc-传统型彩票图片| www.25.la-快三一天几期| www.63ss.com-万博买彩用那个| www.0044.org-彩票数字有34嘛| www.7427.vip-浦东体彩网点查询| www.19176.cc-体彩竞彩网实时比分| www.57357.cc-购彩app是什么| www.022568.com-正规的彩票平台源码| www.088891.com-快三平台是国家的| www.146132.com-体育彩票有多少种| www.250258.com-大富豪彩票app| www.314646.com-极速3d彩票规则| www.377231.com-福彩3d奖项设置| www.510817.com-美丽漂亮的彩虹图片| www.576251.com-开心100彩票网| www.639084.com-体彩店那里开最好| www.790130.com-有没有彩票预测软件| www.864511.com-人人彩票怎么玩法| www.922367.com-腾讯1.5分彩计划| www.974651.com-app众彩官网下载| www.ya6.com-668彩票大发快三| www.pi68.com-500足彩票网| www.1hx.cc-亚朵网时时彩合法吗| www.48hj.com-彩77app安全吗| www.416.in-a5国际高频彩票| www.3457.pw-没财命的中彩票好吗| www.8297.cn-吉林快三跨服图片| www.25856.cc-彩典宝库app| www.65197.com-三d开奖结果乐彩网| www.070761.com-约彩365客服| www.128302.com-500万彩3分快三| www.196162.com-江苏快三奖金对照表| www.259612.com-玩黑彩快三输8万| www.325198.com-蓝海娱乐彩票公司| www.386180.com-乐彩客下载苹果| www.550467.com-全发彩票怎样玩| www.620702.com-马彩-| www.678791.com-竞彩怎么玩-| www.745452.com-腾讯五分彩下载安卓| www.806091.com-牛彩网双色球| www.874632.com-竞彩足球彩票胜平负| www.977173.com-河南濮阳订婚彩礼| www.cai6911.com甘肃快三最牛走势图| www.if73.com-彩票店微信代购中奖| www.xl59.com-福彩青海快三走势| www.06np.com-兰州福彩快三| www.66ny.com-七星彩是什么| www.0023.site-什么彩票是11位数| www.8485.org-万利彩票会被骗吗| www.32617.cc-政府会管结婚彩礼吗| www.69607.com-九九彩票是正规的吗| www.027151.com-中福快三彩票平台| www.090503.com-南宁体彩中心| www.142448.com-钰堂彩票大师软件| www.205589.com-周易测快三-| www.265836.com-北京28是什么彩票| www.373504.com-高鸿彩票app| www.470055.com-代买外国彩票| www.539368.com-广东快乐十分购彩| www.620487.com-vr三分彩走势图| www.681758.com-豪彩平台怎么样| www.745877.com-竞彩网上购彩| www.801601.com-台湾五分彩登录平台| www.864033.com-体彩五星彩查询| www.914768.com-神彩争霸是真的吗| www.967283.com-福彩开奖3d结果| 好运来www.998855k.com| www.bt10.com-兰州快三预测豹子号| www.qn46.com-今日新鲜事彩票3d| www.00mv.com-中彩网北斗每天预测| www.56xj.com-4lcc金彩网百度| www.637.club-爱彩乐辽宁十一选五| www.3345.com-彩票88官方网站| www.7914.top-香港行政快三正规吗| www.18185.cc-皇元彩票手机版下载| www.54150.com-正彩娱平台注册| www.89892.com-093彩票风险| www.029951.com-彩虹马图片真实照片|