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.283276.com-体育彩票怎么看懂| www.898080.com-彩票代理拉人| www.105177.com-uu快三是哪里的| www.355068.cc-体彩大乐透开奖地方| www.555475.com-快三小助手-| www.085043.com-在传奇彩票输了好多| www.131252.com-彩礼的历史-| www.fd.com-中国甘肃彩票快3| www.755025.com-百乐彩手机版客户端| www.263208.com-河北保定快三走势图| www.460907.com-放弃买彩票-| www.720628.com-七乐彩一单式开奖| www.871341.com-福利彩票扫码查中奖| www.011986.com-快三作弊软件| www.121485.com-银川彩票转让| www.286863.com-时时彩在线算号工具| www.388312.com-华彩一点通-| www.515285.com-网上从哪里买七星彩| www.664385.com-新浪爱彩暂停销售| www.811951.com-福彩主任王素英电话| www.907137.com-山西大同快三开奖| www.992300.com-时时彩个位做号技巧| www.06rt.com-小雏菊彩铅画| www.070.bid-广发彩票网页计划| www.360350.cc-3d彩票蔵机字谜图| www.75iz.com-彩票体系玩法| www.265419.com-3d福彩吧-| www.391913.com-彩票娱乐软件下载| www.525256.com-重庆福彩店-| www.044545.com-大信快三彩票| www.272041.com-福彩内蒙快3走试图| www.383309.com-休育彩票19029| www.539114.com-彩票追杀糸统| www.883351.com-网易彩票是批准的吗| www.2873.biz-世界杯体彩兑奖期限| www.338074.com-福彩吧彩票中心| www.469038.com-零零时时彩手机版| www.568712.com-福彩最励志的标语| www.636832.com-分分彩手机做号软件| www.712166.com-e彩彩票-| www.793330.com-彩票助手追号计划表| www.868921.com-深圳快乐彩输得好惨| www.964502.com-彩票计划老师微信| www.fd.com-中国甘肃彩票快3| www.us00.com-江苏快三有没有规律| www.51lf.com-巨彩平台app| www.2276.vip-3d彩民乐摇钱树| www.22957.cc-中彩那天电子课文| www.52915.cc-开心七星彩交流网| www.41144.cc-永盛彩票官网| www.823066.com-99彩票软件-| 500彩票网www.864355.com| www.106048.com-浙江风彩票网| www.886539.com-福彩好运快3网页| www.801698.com-奔驰彩票是真的假的| www.970486.com-体彩排列3出好预测| www.cy66.com-江苏快三网赚| www.30fh.com-校园风景彩铅画| www.1917.com-时时彩任选玩法技巧| www.kb61.com-中国福利彩票分析| www.d06.top-七星彩的秘诀| www.890439.com-彩76-| www.967483.com-网络彩票女托| www.da42.com-吉林快三技巧方法| www.xw40.cc-彩6在哪个平台| www.206198.com-博彩王彩票-| www.320533.com-查彩票的电视| www.470360.com-博彩公司收购银行卡| www.e75.com-今晚七彩奖开奖结果| www.71gz.com-旺彩足球竞彩网| www.7378.com-体彩店转让须知| www.506517.com-彩天地娱乐-| www.66sf.cc-拉菲2彩票合法吗| www.2392.win-多彩彩票d55| www.8625.biz-256彩票网页版| www.38631.cc-环彩appios| www.289222.com-快三每注多少钱中奖| www.368632.com-体彩开机号今天晚上| www.552660.com-求职业彩票分析师| www.614601.cc-龙胜彩票平台| www.687769.com-福建福彩票开奖结果| www.769306.com-竞猜足彩奖金计算器| www.845466.com-体育彩票发行成本| www.917072.com-儿童彩铅画风景图片| www.983514.com-福利彩票站能投诉吗| www.sa0.com-上海时时乐彩下载| www.uj99.com-大赢家彩票不能提现| www.36xd.com-703彩票软件官网| www.4594.in-福利彩票佣金网页| www.799756.com-彩票中奖号码发给我| www.5672.top-球彩台无插件直播| www.464422.com-福彩九宝图不离密码| www.588753.com-七星彩之南国论坛| www.668578.com-远途国际彩票是什么| www.789780.com-雄鹿快三计划三期| www.10ap.com-译酷彩-| www.0843.vip-足彩和福彩哪个真实| www.8188.vip-幻彩门户大全| www.32563.cc-足彩任九19041| www.77001.com-丽彩集团郁鹏简历| www.361571.com-红牛彩票怎么玩法| www.460020.com-彩帝包肖大论坛| www.1563.vip-彩票榜邀请码哪里看| www.8191.biz-8炫彩彩票-| www.37991.cc-棒棒彩票注册| www.91335.cc-好彩蓝莓双爆击毫克| www.078075.com-好友福利彩票骗局| www.141131.com-3d老猫出彩的快讯| www.900341.com-如何去彩票店买彩票| www.055996.com-福彩开奖几位数有奖| www.702594.com-北京福彩新快三振幅| www.325791.com-香港6合彩2018| www.397452.com-随时赚彩票平台| www.491231.com-快频彩怎么打票赚钱| www.555932.com-香港楼和彩开奖结果| www.636078.com-彩虹6号围攻行动| www.705581.com-红旗彩票下载| www.782815.com-福彩鬼六字谜| www.856701.com-逍遥彩票软件破解版| www.920892.com-凤彩网是合法的吗| www.972346.com-中彩那天-| www.uc.com-彩票合法吗-| www.0493.net-双彩网3d图谜专区| www.458002.com-②元彩票网-| www.559538.com-三d彩宝网开机号| www.655348.com-四季彩票登录平台| www.768402.com-电信免费彩铃| www.870038.com-人人彩票手机版下载| 500彩票www.66621q.com| www.57ao.com-特彩吧天空与你同行| www.477336.com-开一个彩票店挣钱吗| www.632501.com-体育彩票所有的玩法| www.754057.com-免费送彩金网址| www.860081.com-2019彩票平台| www.958436.com-广东口袋彩店二维码| www.56za.com-中国福彩游戏机玩法| www.9552.biz-体育彩票号码有几位| www.65914.com-那种彩票奖金最高| www.028731.com-杏彩平台手机版登录| www.128954.com-28彩票平台注册| www.216256.com-体育彩票玩法| www.310179.com-青岛福彩兑奖流程| www.99287.cc-爱彩票是正规的吗| www.981246.com-彩霸王三星做号软件| www.677836.com-华彩传销-| www.771405.com-体彩任三开奖| www.880863.com-福彩真精华布衣天下| www.985234.com-竞彩2c1保本对冲| www.cp7876.com-辽宁体彩网-| www.pj21.com-东北彩票网-| www.48lo.com-星空星彩-| www.wz87.cc-海南七星彩头尾| www.077085.com-世界杯彩票在体彩买| www.85853.com-彩涂钢卷-| www.281395.com-幸运五星彩票| www.380097.com-福彩条例-| www.7663.cn-彩票万能挂机软件| www.110427.com-福彩3d线上-| www.732436.com-体彩7数走图| www.a27.club-618彩票注册| www.mf15.com-福建快三遗漏值统计| www.22wz.com-会员登陆9b彩票| www.81kg.com-彩神通代理会员贴吧| www.162081.com-分分时时彩是否有假|