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.g50.club-好彩门户免费资料大| www.0899.in-七乐彩购彩大厅| www.780358.com-爱乐透彩票预测| www.878637.cc-彩票玩法规则及中奖| www.cai5744.com吉林快三走势详细图| www.8716.xyz-高频彩开奖直播历史| www.76772.cc-网络时时彩赌博举报| www.ig38.com-幸运快三手机版下载| www.22ix.com-福彩兑奖时间有多久| www.1119.hk-竞彩nba总冠军| www.01494.com-永利送彩金-| www.82892.cc-体彩软件app| www.091042.com-今晚六会彩开奖生肖| www.289559.com-凤凰私彩平台官网| www.383989.com-福利彩票采集器| www.500003.com-澳洲五分彩是什么| www.572326.com-6彩下载-| www.653608.com-福彩3d1月3-| www.374234.com-网易彩网手机版| www.561831.com-加微信送99彩金| www.154307.com-彩票滚雪球数字选发| www.075022.com-深圳试行区块链彩票| www.135004.com-彩票平台送18彩金| www.188691.com-彩票屠龙-| www.669656.com-彩票工具之今日运势| www.662284.com-彩天下apk-| www.902670.com-诺亚彩票-| www.cai8144.com上海快三漏-| 500彩票www.500107.com| www.691218.com-李小五足彩-| www.70528.com-五分快三猜号技巧| www.129382.com-一分快三可以么| www.80500.com-国彩骗局揭秘| www.088.space-3d走势图彩宝贝| www.5066.net-世界杯足彩停售了| www.17922.cc-聚星彩票下载| www.016036.com-彩票开奖查寻| www.pr11.com-33彩票-| www.219485.com-关于取消体彩高频| www.540052.com-古风彩铅手绘| www.967967.com-去哪找彩民群| www.lu.com-皇都彩票能赚钱吗| www.ss78.com-我买彩票中大奖经历| www.07nf.com-彩民彩票靠谱吗| www.886993.com-体育彩票是否真实| www.966851.com-迈巴赫彩票团队| 购彩堂www.738742.com| www.1230.bid-上海快三奖金查询| www.69136.com-大乐购捷豹专业彩票| www.211296.com-彩神软件安卓版| www.825234.com-福建丹青快三查询| www.921019.com-彩票3d综合走势图| www.977584.com-亿菲彩票-| www.fy27.com-网上微信彩票诈骗群| www.913187.com-3d彩经网金码| 500彩票www.51515e.com| www.899407.com-投注彩票软件下载| www.997865.cc-排三个位乐彩网走势| www.iz32.com-辽宁福彩3d-| www.715225.com-彩票实体店代购系统| www.78283.cc-阳光开奖中国福彩网| www.95076.com-彩妆店加盟要多少钱| www.440430.com-彩票挂机软件有用吗| www.570511.com-湖北快三胆码是什么| www.978327.com-60彩票app-| www.gb89.com-快三追号技巧| www.22bz.com-足彩稳胆是什么意思| www.944473.com-百万彩票幸运快三| www.999917.cc-手机十分彩是真的吗| www.fw44.com-福彩福建快三走势图| www.ys21.com-彩票坊用户注册| www.18ie.com-什么彩票天天开奖| www.591005.com-徐州彩票中奖| www.40za.com-中彩网走势-| www.4348.vip-邢台福彩中心| www.13077.com-足彩竞彩310推荐| www.73fn.com-乐彩模拟投注平台| www.8854.com-体育总局限制体彩| www.506301.com-五行预测彩票书籍| www.292711.com-内蒙福彩快3开奖| www.352884.com-福彩派奖-| www.sw21.com-7星彩大奖-| www.743811.com-大发彩票幸运快三| www.6025.vip-淄博体彩中心| www.380061.com-反赌吉林快三| www.98bt.cc-空间炫彩字体怎么改| www.05721.com-乐彩网大发快是骗人| www.994051.com-看福彩三地图迷大全| www.037.cn-福彩3d彩票2元网| www.10564.com-关小刀足彩任9预测| www.021720.com-福彩20选8走势图| www.220002.com-快频彩票网-| www.949690.com-五分快三玩法| www.4222.bid-广州七波彩国际真假| www.306543.com-澳发彩票官网| www.kw29.com-快三福利彩票合法吗| www.036007.com-福彩最牛广告语| www.222858.com-福彩3d杀号定胆| www.316010.com-为什么竞彩要审批| www.416566.com-足彩稳胆推荐公众号| www.24547.com-敂力七星彩奖表| www.315139.com-竞彩篮球加时赛算吗| www.zc23.com-速8彩票是真的吗| www.35mk.com-2019年七星彩图| www.05210.com-体彩2019新政策| www.306695.com-吉祥彩票app| www.604432.com-怎么投诉彩票app| www.241911.com-七星彩开奖玩法说明| www.322791.com-下载全民彩票大厅| www.388167.com-星空彩票平台正规吗| www.502682.com-多彩投失败案例| www.573035.com-秦淮灯彩-| www.381620.com-海南私彩中了不给钱| www.947822.com-彩经网绝杀红球| 大赢家彩票www.598061.com| www.91qa.com-我想举报01彩票| www.684659.com-查福彩3d中奖| www.888939.cc-彩店宝吧-| www.17807.com-足彩赌博会有赢吗| www.299330.com-凤凰彩票破解| www.981929.com-世界彩票最大奖排行| www.34459.com-上海福彩中心投注| www.712923.com-手机发送短信买彩票| www.849909.com-掌上中彩一彩票下载| www.955424.com-彩票306安卓提现| www.al06.com-福彩双色球骗局揭秘| www.05954.com-盛彩下载链接| www.42ix.com-苹果手机原彩是什么| www.984.cm-够力七星彩兑奖表| www.5024.com-吉祥彩票软件下载| www.688007.com-湖南福利彩票中心| www.993691.com-姜山最新足彩推荐| www.6867.biz-福彩3d怎么看两码| www.8761.cc-名人彩票线路登录| www.7pn.com-甘肃快三两天未出号| www.792591.com-广东福彩主任是谁| www.664738.com-703彩票安卓版| www.582560.com-福彩开奖试机号字谜| www.gz94.com-买彩票砍龙什么意思| www.771797.com-关于腾龙时时彩做号| www.832674.com-778彩票网是官网| www.910298.com-3d彩涂丹东全图| www.977074.com-彩礼不能超过两万| 名门彩www.33997i.com| www.050995.com-彩之云-| www.398832.com-大成彩票多长时间了| www.3716.vip-体彩排列五字谜总汇| www.32074.com-章鱼竞彩-| www.91565.cc-好彩红色装-| www.5681.wang-龙胜彩票投注站| www.084318.com-快三大小倍投方法| www.886578.com-破解时时彩-| www.973908.com-买彩票投一倍| www.cai1155.com福彩快3玩法| www.22933.cc-福利彩票中两个数字| www.001802.com-彩票如何定胆| www.653712.com-快三左转基础教学| www.753267.com-安徽快三单号技巧| www.z54.net-彩神8iv-| www.488404.com-七乐彩3加1有奖吗| www.557585.com-酷彩吧是否靠谱| www.003881.com-做梦梦见买彩票| www.071836.com-彩色纸箱厂家| www.88py.com-彩票粉-|