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.293766.com-网易彩票官方下载| www.70bh.com-害人的体彩1l选5| www.64ai.com-黑圣手漫画彩吧图库| www.af1.com-福彩3d攻略-| www.4520.vip-快三和值倍投| www.654335.com-东方彩票是正规的吗| www.791404.com-排列三走势囹彩经网| www.883538.com-彩票能用密码兑奖吗| www.963617.com-梦到彩虹是什么意思| 大赢家彩票平台www.579020.com| www.677926.com-福彩网开奖号码| www.718765.com-佛教解释彩虹| www.806613.com-老猫出彩快讯下载| www.886253.com-彩票随机原理| www.974956.com-体彩大乐透历史奖金| www.9120.cn-663299彩霸王| www.678719.com-足彩必发盈亏指数| www.788318.com-彩票8app下载| www.883464.com-彩网在线视频| www.975263.com-腾讯赛车彩票官网| www.mi3.com-彩票开奖查询大全| www.vj54.com-排列三试机号牛彩网| www.62oh.com-彩票大数据网| www.1535.vip-内蒙古福彩快三直播| www.9834.org-建筑彩绘大图| www.54245.com-时时彩怎么压容易赢| www.56sd.com-彩票历史数据下载| www.2658.club-近期彩票大奖得主| www.16087.com-福彩7十1开奖结果| www.88414.cc-意大利彩票奖金排名| www.062907.com-tcp688淘彩票| www.154542.com-刷分红坑人彩票平台| www.963256.com-彩钢瓦价格-| www.cp11.com-福彩5d一等奖多少| www.160604.com-八七彩票app| www.xu61.com-福利彩下载-| www.73du.com-福彩双色球中了篮球| www.2835.cc-用自己ip代玩彩票| www.612265.com-大乐透彩票几号开售| www.723572.com-镇江体彩怎么申请| www.843022.com-足彩怎么算钱| www.961009.com-河北福彩3d开奖| www.cai6744.com快三走势图吉林省| www.061925.com-彩客网可以提现吗| www.671483.com-三d手机彩宝网网| www.806989.com-七号彩票注册邀请码| www.3yd.cc-足球彩票有关的股票| www.0832.in-足彩店月收入| www.8929.net-体彩直播七星彩| www.923213.com-彩票站几点下班| www.986890.com-234官网彩票| www.zn19.com-福建省体彩中心官网| www.90xu.com-彩票开奖机器图片| www.7388.top-竞彩团队-| www.673758.com-85彩-| www.306936.com-韩国足彩-| www.346360.com-彩票走势图时时彩| www.632537.com-3d彩票出多少号| www.780989.com-网络彩票开挂| www.915201.com-快捷彩票app下载| www.163907.com-体彩容错一场怎么打| www.27870.com-cai3168彩票| www.087882.com-网络彩票平台大全| www.209889.com-福彩3d合买计划| www.cw6.com-彩票宗旨-| www.232254.com-旺彩预测软件下载| www.50528.com-篮球彩票从哪买| www.319001.com-168时时彩-| www.18cf.com-鲁豫有约彩票人生| www.911675.com-三分赛车彩票可靠吗| www.979670.com-计划彩票聊天室| www.8ve.cc-体育彩票标准店面| www.7979.bid-世界杯博彩走势| www.65221.com-福彩500期走势图| www.021573.com-优游彩票平台注册| www.086366.com-体彩胜负彩中奖规则| www.646089.com-财神分分彩-| www.455.cm-福乐彩是真的吗| www.86860.com-快乐彩12选5结果| www.268920.com-广发彩票骗局| www.520111.com-彩票入迷能回头吗| www.994722.com-好彩客官方网| www.905806.com-幸运彩票手机版官网| www.ft0.com-今日彩票预测| www.925443.com-体彩双胆预测最准确| www.bl0.cc-湖北体彩11选5| www.72953.com-彩票中奖一亿交税| www.09799.cc-山东彩沙龙论坛| www.177521.com-福彩快3玩法介绍| www.278389.com-分分中彩票网页| www.363396.com-长春市彩票中心| www.449590.com-重庆十四彩怎么玩法| www.7032.cc-易网彩票网彩| www.02546.com-福彩3d二元彩票网| www.88aq.com-福彩009app-| www.333602.com-买产品送彩票犯法吗| www.435501.com-电脑卖七星彩奖软件| www.32iy.com-神圣彩票骗人吗| www.839986.com-澳客彩票手机版| www.913018.com-体彩三地试机号| www.971684.com-今天七乐彩最新开奖| www.c5.cn-福彩内蒙古快三开奖| www.pr30.com-98彩票会改单吗| www.m38.in-爱彩乐11选5技巧| www.157259.com-足彩冷热表-| www.623562.com-曲昌春竞彩推荐| www.438499.com-五彩缤纷造句| www.757171.com-西宁体育彩票高频彩| www.826879.com-大资本彩票网怎么样| www.941590.com-彩票聊天话术| www.992906.com-买彩票赚钱可靠吗| www.84jv.com-百乐门彩票官方平台| www.178561.com-山东彩票沙龙论坛| www.209070.com-福彩快三怎么举报| www.724770.com-买彩票是不是投资| www.2121.site-中国全部彩种| www.785861.com-彩票有几种系统| www.728669.com-大乐透预测号中彩网| www.806874.com-爱彩票投注网香港马| www.871096.com-七星彩排列走势图| www.950609.com-本期七星彩开奖结果| www.uj33.com-彩票13877-| www.608250.com-三d新彩吧图谜| www.167857.com-中国快三-| www.835651.com-好彩28期开奖结果| www.837150.com-竞彩足球开奖谁赢了| www.910177.com-彩神计划王看胆| www.982745.com-上海彩票集中投注| www.ot60.com-中港彩票-| www.95cv.com-多彩下载app| www.012533.com-七星彩2281-| www.112251.com-极速赛车彩票代理| www.060363.com-千禧排三家彩网| www.08266.com-南海福彩中心站| www.95118.com-利民彩票网可靠吗| 吉利彩票www.66376a.com| www.mt15.com-北京丹彩快三| www.q80.me-广东体彩网11选5| www.v56.com-彩票开结果大乐透| www.38iq.com-华夏彩票网站多少| www.263190.com-七乐彩设奖规则| www.783638.com-什么是非法彩票| www.24my.com-派彩真稳赚不赔吗| www.0172.com-7彩色-| www.226901.com-快三跨度和值表| www.43mf.com-竞彩足球游戏包括| www.517579.com-皇冠集团彩票谁知道| www.865559.com-胜负彩澳客网电脑版| www.930135.com-福彩3d天吉网预测| www.808551.com-竞彩任九奖金预测| www.22289.com-彩虹世界app新版| www.85933.com-我现在附近的福彩店| www.329531.com-千禧彩票-| www.38757.cc-福彩3d最新中奖号| www.82379.com-海南东方快三销售点| www.34436.com-鸿运时时彩走势图| www.843474.com-如何做彩票店| www.973886.com-快三历史开奖结果| www.ja41.com-香港福彩走势图| 网购彩票www.cp7777b.com| www.7084.biz-彩46网站可靠吗| www.84334.com-今天福彩3d布衣图| www.379103.com-足彩论谈-| www.528970.com-飞鱼彩票走势图|