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.25du.com-彩天下下载-| www.5024.com-吉祥彩票软件下载| www.188387.com-体彩名词-| www.167649.com-福彩快三河南| www.650423.com-彩虹伞教案小班| 中国福利彩票www.34788p.com| www.982097.com-福彩3d解码神器| www.cx11.com-上海快三预测号码号| www.8025.com-炫姿彩茶麸神洗| www.256725.com-掌上东彩-| www.358928.com-北京花园彩票站临朐| www.292168.com-米聊购彩大厅| www.397249.com-在哪里开彩票信用盘| www.1964.tv-大地彩票骗局| www.03387.com-彩票巴巴登录| www.9076.me-今晚七彩开奖的号码| www.62161.cc-彩票双色球怎么兑奖| www.028501.com-黑彩怎么赚钱| www.134277.com-好彩三十斤-| www.716762.com-彩铅画古风少女大全| www.188390.com-福彩3地-| www.297068.com-山东体彩快乐扑克三| www.381114.com-外国牛人破解彩票| www.489368.com-云南彩票中奖没人领| www.563775.com-香港中棠彩-| www.632101.com-红8彩票平台| www.6022.biz-打彩票欠钱-| www.ct62.com-私彩官方如何作弊| www.613735.com-彩虹六号国服代理| www.720737.com-网上的天天乐彩票| www.817699.com-中国香港快三| www.893268.com-手机彩票过滤大师| www.972049.com-印尼五分彩开奖官网| www.gn44.com-博牛彩票下载安装| www.zy86.com-山西3d彩民乐| www.052671.com-5oo万彩票网即时| 500彩票www.50788d.com| www.738021.com-福彩3d摇奖机| www.869706.com-49彩票是正规的吗| www.64ns.com-福彩票三d电子晚报| www.1896.org-大通高频彩票手机版| www.vl92.com-快三走势图怎么解法| 6678彩票www.2988cai.com| www.ll01.com-彩八下载-| www.294.hk-彩票打错老板不赔| www.011151.com-搜狐福利彩票| www.638049.com-何振东体彩店二维码| www.835575.com-23选5彩票-| www.499551.com-福利彩票胆拖玩法| www.974945.com-彩票查询大乐透预测| www.9004.com-中彩票去哪里领奖| www.076686.com-内蒙古快三实时| www.919363.cc-彩票机怎么出假票| www.cp6757.com-北京快三开奖直播网| www.uo22.com-江苏e球彩开奖结果| www.813428.com-6十1体彩开奖| www.87815.com-顺龙彩票-| www.353647.com-彩票直播造假视频| www.20120.com-竞彩足球今日提点| www.862847.com-体育彩票16期结果| www.972323.com-菠萝彩3d选号魔图| www.751149.com-彩票巴士怎么提现| www.932974.com-马来西亚南洋彩规律| www.ui1.cc-七乐彩开奖结果今天| www.9wh.cc-彩票几点就不能买了| www.288657.com-彩票里的长龙提示| www.372457.com-七彩色染发图片| www.51335.cc-福彩倍投稳赚| www.025097.com-褔体彩开奖公告| www.907.me-谁有彩票33软件| www.5677.in-彩票胆拖选号| www.475645.com-西宁福彩领奖在哪| www.1086.cm-幸运快三群-| www.868197.com-爱彩乐一分钟快三| www.237307.com-福彩3d的玩法| www.433320.com-彩虹堂官方下载| www.563023.com-9a彩票app下载| www.673981.com-古建梁彩绘博古图案| www.835983.com-手机彩娃彩票下载| www.994965.com-好彩堂独家资料| www.of41.com-快三软件哪个是真的| www.10tj.com-如何改私彩平台数据| www.001616.com-澳门天麟国际购彩| www.3879.top-好客彩aqq-| www.506959.com-彩票选数字怎么选的| www.656765.com-玩爆福利彩票游戏机| www.175378.com-福建快三遗漏数据| www.620573.com-补偿公告腾讯彩票网| www.234195.com-快三彩票群-| www.671885.com-彩票刮刮乐促销方案| www.768551.com-彩票中大奖怎么领取| www.c45.biz-彩票306软件在线| www.73pp.com-彩易手机版-| www.729508.com-新浪爱彩双色球基本| www.844233.com-遵义彩票店转让信息| www.960111.com-被骗到菲律宾卖彩票| 500万彩票www.96386k.com| www.553.tv-分分彩买大小规律| www.443839.com-国2元彩-| www.565081.com-梦见彩票中大奖预兆| www.5322.in-4567彩票注册| www.888976.com-帮人投注时时彩骗局| www.539748.com-彩经网走势图带震幅| www.688537.com-山西体彩电话投注| www.801967.com-cy335彩运网| www.22195.com-红彩会登路-| www.611677.com-福彩诈骗套路| www.734600.com-彩神通关注碼| www.825957.com-彩王争霸平台| www.951400.com-977彩票aqq-| www.cp0.win-黔南州福彩中心| www.16cx.com-体彩开奖公告详情| www.ei60.com-彩色混凝土路面做法| www.807339.com-网上买彩票正规吗| www.872985.com-下载8彩之星| www.937764.com-云彩厅app推荐| www.986303.com-玩彩票大平台可靠吗| www.bb54.com-新浪数字彩票3d| www.ri80.com-派彩网吉林快三| www.648086.com-史上最大彩票中奖| www.713812.com-078彩票登录网址| www.779126.com-福彩3d大盘图| www.844012.com-福彩公益奖-| www.900588.cc-中福彩官网首页| www.959030.com-美国彩票强力球玩法| 福彩网www.5522g.cc| www.335943.com-微博彩票-| www.398063.com-湛江七星彩头尾开奖| www.654105.com-一定牛彩票网站| www.863285.com-时时彩开奖器采集| www.922826.com-香港管家彩图| www.977401.com-掌上彩票安全吗| www.zm1.cc-福彩快三遗漏号码| www.pt52.com-彩票争霸vl-| www.077870.com-玩彩网网址是多少| www.368999.cc-9万彩票专业版| www.456825.com-中彩缘网-| www.584100.com-彩金和黄金哪个贵| www.654977.com-福彩晚秋和值谜| www.732277.com-订婚退彩礼案例| www.791990.com-附近体育彩票站| www.862117.com-乐彩客彩票-| www.930026.com-一分快三看大小| www.975957.com-环彩彩票-| JJ彩票www.647311.com| www.95ki.com-大数据彩票王律强| www.878277.com-彩票500开奖结果| www.3309.vip-买彩票幽默搞笑图片| www.598988.com-中彩网糖果视频分析| www.99187.cc-大发时时彩五星玩法| www.388443.com-摇骰子彩票天天乐| www.495090.com-高频彩有没有规律| www.559034.com-今日3d牛t彩网| www.605970.com-彩乐园lll-| www.446661.com-足彩奖金封顶吗| www.539736.com-大地彩票安卓版| www.601346.com-也买彩网站安全吗| www.196693.com-彩票开奖七星彩| www.370146.com-手机彩膜厂家| www.79931.cc-中彩网奖池-| www.055810.com-快三全天助赢计划| www.98244.com-时时彩全天精准计划| www.063225.com-彩拾彩票下载| www.18dm.com-计划彩下载安装|