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.139311.com-遵义市体彩中心| www.286271.com-公益福彩app骗局| www.484797.com-正好彩票网打不开| www.571885.com-新盈彩票app下载| www.655395.com-6188彩票包赔车| www.777054.com-彩宝宝下载-| www.874449.com-双色球老谢说彩| www.963035.com-足彩投注-| www.cai114.com-贵州快三今天开奖| www.lx23.com-青海省快三-| www.t45.net-福彩3d合买群| www.57ha.com-360官方彩票| www.0740.vip-买易彩快三的技巧| www.03238.com-怎么戒掉网上买彩票| www.62322.cc-搜狐福彩体彩天霁| www.026376.com-黑客洗劫私彩平台| www.109198.com-星彩3d论谈-| www.185851.com-有人带玩快三| www.265016.com-大福彩有什么诀窍吗| www.391665.com-7意彩app苹果版| www.523253.com-福彩毒胆专家预测| www.618028.com-幸运彩走势图软件| www.696531.com-新浪爱彩投注| www.779764.com-赌博游戏彩票机| www.863893.com-中国福彩造假| www.938721.com-上海福利天天彩选4| www.998351.com-90.cm彩票-| www.bf85.com-黑彩平台漏洞刷钱| www.uk79.com-一分快三开奖豹子号| www.14ia.com-中国体育彩票任选9| www.608.la-创世红海彩票代刷| www.5099.biz-广东福利彩票网官网| www.11077.cc-大彩鲸官网-| www.57579.cc-下载澳客竞彩官网版| www.046518.com-天天彩网站-| www.134449.com-广州好彩香烟多少钱| www.218059.com-网络彩票赌博犯法吗| www.295289.com-彩票送体验金| www.369364.com-99彩票网c099| www.473957.com-南方福彩网软件下载| www.561888.com-广西福彩彩民卡| www.638030.com-下载正规的c彩61| www.817493.com-天荣国际博彩合法吗| www.9375.cn-福彩老板是谁| www.491878.com-彩票代下兼职| www.tl21.com-福彩三d解太湖汇总| www.136795.com-彩票源码的基础知识| www.221122.com-彩牛彩票-| www.298440.com-吉林省彩票中心在哪| www.374044.com-七星彩有规律可寻吗| www.548759.com-国彩邀请码-| www.646770.com-怎样成为职业彩民| www.728102.com-亿彩官网-| www.802969.com-福彩领奖需要多久| www.872108.com-贵阳体彩中心在哪| www.cp984.com-福建福彩快3开奖| www.mq72.com-福彩大小单双骗局| www.4ln.com-人人体育彩票官方| www.63tr.com-精彩彩票客户端下载| www.0762.win-私彩接口-| www.8940.me-七星彩到几点结束| www.45047.com-盛大彩票555| www.90987.com-天天中彩吧三地| www.051166.com-真实的彩票代购网站| www.157424.com-靠谱的购彩app| www.246973.com-福彩中奖概率| www.319906.com-时时彩赢钱秘诀| www.390102.com-彩票台子app| www.537342.com-c168彩票app| www.621930.com-福利彩票十大巨奖图| www.692602.com-福彩马后炮解太湖| www.771339.com-彩虹7号电池是什么| www.878193.com-重庆彩大底计划| www.952412.com-时彩平台-| www.996618.com-体彩走势图app| www.fu2.cc-台湾时时彩开奖结果| www.pb06.com-河南快三奖金| www.32.red-竞彩总进球数玩法| www.67bo.com-乐彩彩票软件下载| www.0751.wang-福彩三地布衣图库| www.8755.org-怎样组选双色球彩票| www.42010.com-12彩票专业版| www.86940.com-快三开奖查询今天| www.037683.com-乐彩网最新版| www.139878.com-广东省福彩兑奖流程| www.217548.com-分分彩稳赚技巧| www.286836.com-武汉福彩快三转让| www.391844.com-体彩扑克3中奖规则| www.512392.com-重庆快乐十分购彩| www.581264.com-生肖彩票开奖查询| www.654065.com-珀彩国际是传销吗| www.761401.com-搜神传彩芝的口头禅| www.845619.com-竞彩彩票停了| www.908899.com-福彩交流-| www.968895.com-彩名堂客户端| www.hf12.com-北京快三奖金| www.xr82.com-网上买彩票流程| www.14tx.com-结婚要不要彩礼钱| www.202.red-彩铅昆虫-| www.3311.com-体育彩票购买时间| www.8565.net-全国体彩福彩开奖| www.52235.com-存3元送彩金| www.93455.cc-关于竞彩001| www.049969.com-今晚福彩3d奖号| www.146011.com-彩票c53cc-| www.230793.com-彩运8软件是真的吗| www.300683.com-天天爱彩票升级维护| www.365921.cc-福彩和值遗漏统计表| www.450249.com-七星彩真能中奖吗| www.536756.com-福彩幸运宝石| www.659062.com-体彩大乐透都是假的| www.739927.com-彩帝网页-| www.806466.com-京彩娱乐登录网址| www.876188.com-五省快三最大遗漏值| www.968469.com-福彩6十l生肖开奖| 快3彩票www.783709.com| www.hz25.com-福彩排列五中奖规则| www.ya34.com-爱彩乐十一选五| www.14yi.com-明星彩票骗局| www.2918.in-佛山体育彩票官方| www.7947.biz-澳门博彩研究中心| www.23712.com-我要跳快三慢跳| www.62108.com-微信购彩app下载| www.039584.com-广州东方快三正规吗| www.121844.com-吉利时时彩开彩结果| www.189284.com-网站彩票骗局大揭密| www.255229.com-最佳彩票平台| www.318923.cc-易彩网一分快3计划| www.426510.com-竞彩研究心得| www.539939.com-体彩手机在线坑人| www.675678.cc-旧版噢百万彩票| www.742421.com-万彩宝app-| www.805028.com-足彩大小球看立博| www.872522.com-天天快三开奖| www.968364.com-胜负彩开奖结果查询| 500彩票www.627297.com| www.go36.com-河南太康彩礼| www.wq25.com-9118彩票app| www.10gd.com-178彩票是真的吗| www.74ff.com-宇宙彩票-| www.0752.ren-福彩三d图库大全| www.9768.online七星彩19034| www.45021.com-87彩票实体店| www.84303.com-七星彩直播| www.028342.com-彩票送彩金排行榜| www.094699.com-福彩3d网上购买| www.169326.com-怎么看懂快三走势图| www.290896.com-爱彩乐专业版手机版| www.355286.com-查彩票双色球怎么查| www.423337.com-休育彩票七星彩| www.510450.com-本子漫画全彩图片| www.571253.com-石敢当好彩妹原型| www.631353.com-好彩头小样招代理吗| www.690931.com-福彩排列七几点开奖| www.759220.com-上海福彩网正规网站| www.903198.com-博彩合买大厅| www.962146.com-彩涂钢板卷-| 爱购彩票www.3552f.com| www.az83.com-快三平台骗局| www.pq60.com-3d字谜多彩网| www.09.gg-黑彩服务器-| www.54lr.com-彩16苹果下载软件| www.720.la-竞彩足球最稳推荐| www.3767.vip-全民免费彩票可靠吗|