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.555541.com-宫崎彩-| www.671952.com-亚博投彩官网| www.611220.com-彩虹六号本子无翼鸟| www.394381.com-海南私彩梦解| www.200298.com-132彩票安卓官网| www.297581.com-v8彩票-| www.388208.com-中国福彩彩现场开奖| www.y22.shop-澳彩娱乐-| www.028862.com-网彩快3app-| www.2404.org-太湖字谜中彩网| www.660999.cc-中国福利彩票e线| www.857186.com-下一期彩票中奖号码| www.206954.com-易彩官方网下载| www.630232.com-海南七星彩打奖| www.54rk.com-中大奖彩票下载安装| www.987630.com-彩票大小单双怎么算| www.00qn.com-彩虹周杰伦歌词简谱| www.896830.com-彩票中奖者的故事| www.970193.com-体彩356期家彩网| www.cp00.com-彩客彩票-| www.249.live-河北快三奖金分配| www.089005.com-休彩排列三试机号| www.7gz.com-网易彩票专家杀号| www.3070.biz-彩神计划江苏快3| www.003133.com-今日福彩三地藏机图| www.188748.com-彩经网大乐透杀号| www.452178.com-彩票游戏机说明书| www.763832.com-手机足彩软件排行榜| www.633376.com-哪个彩票可以买篮球| www.825991.com-宁波快乐彩12| www.952547.com-好彩先锋最新资料| www.00iz.com-福利彩票今天| www.180112.com-快三复式投注秘诀| www.840702.com-福彩背后的秘密| www.931038.com-南洋乐和彩的资料| www.986428.com-上海基诺彩票开奖| www.fq9.com-时时彩黑客破解公式| www.48jj.com-天际彩票注册| www.008733.com-彩客网电脑版官网| www.597502.com-头奖彩票合法吗| www.344172.com-163彩票网网站| www.518368.com-安徽福彩报纸| www.308017.com-彩票投注站赚钱么| www.606231.com-福彩杀码技巧| www.783302.com-三d家彩网开机号| www.17000.cc-彩票破损能兑奖| www.582567.com-重庆分分彩票输惨| www.702474.com-3位数的彩票怎么买| www.1298.xyz-国彩乐网站是真的吗| www.346.tv-攻击黑彩平台| www.430786.com-江苏丰彩新型| www.535115.com-彩票有几位-| www.600400.com-买彩票的巧合| www.094877.com-福彩双色球摇奖视频| www.57399.cc-锋彩直播添加频道| www.093518.com-北京朝阳彩票| www.221186.com-uu快三是真的吗| www.397051.com-v8彩票苹果-| www.542400.com-3d今天彩图-| 网易彩票www.097wy.com| www.690601.com-竞彩篮球购买| www.829099.cc-彩9彩票ios下载| 500彩票www.50051h.com| www.967445.com-福彩3d高手群微信| www.711991.com-女方提出离婚彩礼退| www.807091.com-体育彩票可以对折吗| www.969412.com-福彩3d实战宝典书| www.jh75.com-彩票漏洞-| www.692230.com-瑞诚彩票合买平台| www.807093.com-彩票纸回收-| www.907296.com-网上彩票app下载| www.53uo.com-贵州毕节彩票中心| www.94689.com-竞彩套利方法| www.110455.com-福彩新代码-| www.225228.com-手机可以投注彩票吗| www.379492.com-今晚彩票全部开奖| www.9428.loan-加拿大彩票头奖华人| www.051590.com-赢彩吧官网-| www.187478.com-国家叫停重庆时时彩| www.hr42.com-好彩堂网站-| www.zu61.com-汇彩国际平台| www.020526.com-今天彩票开机号| www.260907.com-博众彩票官网| www.195977.com-江西福彩中心| www.427512.com-彩经网快三-| www.0145.top-彩色的开头造句| www.839216.com-彩75是真的吗| www.926488.com-优信彩票平台网址| www.975598.com-彩经网江苏快三计划| www.167009.com-做快三是什么意思| www.271105.com-彩票55app苹果| www.357171.com-多肉情景彩铅画| www.464674.com-彩票店兑奖规定| www.599066.com-属狗能买彩票吗| www.688240.com-中国体彩公众号| www.539115.com-时时彩杂六有哪些| www.931667.com-97彩票平台-| PK彩票www.8499p.com| www.07772.com-课文中彩那天朗读| www.58191.cc-利彩工具彩助手| www.004235.com-快乐网快三的玩法| www.609192.com-腾讯分分彩后三胆码| www.669525.com-怎么样破解彩票| www.432838.com-微彩吧官方开奖结果| www.704433.com-彩88彩票骗局| www.62nl.com-福彩3a开奖查询| www.1647.pw-彩运宝官方网站| www.631644.com-七彩城-| www.721110.com-两元彩票软件| www.365979.com-排三分析预测彩吧网| www.7683.cc-福彩三d坐标图| www.267781.com-甘肃快三遗漏查询表| www.269218.com-彩票砍龙是什么| www.kk68.cc-胜负彩开奖-| www.189347.com-福彩基诺中奖规则| www.687251.com-4lcc金彩网-| www.393200.com-深圳彩票中心电话| www.315618.com-重庆时时彩官方投注| www.22xt.com-福彩3d初几开奖| www.97250.com-京彩挂机下载| www.082308.com-下载乐彩网官方版| www.183338.com-河北快三号码遗漏| www.257892.com-彩13-| www.009340.com-新彩吧手机彩票网| www.82380.com-p3试机号彩吧助手| www.096008.com-双色球神彩福牛杀号| www.833618.com-彩票双色球生肖选号| www.917550.com-头彩彩票app| www.984189.com-福彩3d凤彩网| www.vs98.com-福彩开奖彩票网| www.227.live-重庆时时彩5星复试| www.855375.com-七星彩机选投注器| www.544343.com-大乐透中彩票走势图| www.631009.com-彩运宝安全吗| www.705326.com-七星彩杀头尾数专区| www.784588.com-众彩网预测专家预测| www.862721.com-我的彩票在哪里| www.625608.com-广场彩票30万大奖| www.150112.com-甘肃体彩网11| www.279133.com-快三2豹的规律| www.199267.com-体彩排列三开机号| www.268800.com-台湾快三查询| www.820728.com-彩钢瓦型号规格图解| www.567457.com-福彩3d13-| www.653580.com-北京pk彩票客服| www.718572.com-关于彩虹的唯美句子| www.786196.com-昨日彩票开奖| www.169049.com-福彩3d预测-| www.237624.com-中国福彩网app| www.307461.com-河北体彩排五| www.570232.com-福彩三d专家预测号| www.6698.vip-全部彩票软件| www.092185.com-谁有吉林快三微信群| www.53927.cc-3d彩票结果-| www.036106.com-彩票梦想站提现不了| www.20fc.com-彩票110040期| www.3049.cm-体彩预测杀组合| www.5632.pw-安徽天福彩票机| www.354440.com-彩票排列五预测| www.061221.com-彩客网是什么东西| www.210494.com-分分快三官方开奖| www.365145.cc-体彩弃奖-| www.470707.com-排列3走势图乐彩网| www.3688.cn-彩色复印机租赁|