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.454413.com-网易彩票官方| www.019721.com-汕头彩票一等奖| www.8sw.cc-生肖彩一分钟一期| www.501681.com-福建体彩中心搬迁| www.776272.com-火剪彩票下载| www.051107.com-天福彩票官方网站| www.229870.com-奇乐彩票132期| www.377308.com-福彩店对联-| www.198104.com-福彩3d大本营预测| www.309949.com-彩票照片可以兑奖吗| www.401062.com-七星彩粤海彩经图| www.469925.com-快发彩票官方直营网| www.067698.com-大乐透凤彩网| www.525216.com-杨大侠彩乐乐| www.732084.com-微微彩票管网| www.817022.com-红彩快三邀请码| www.972542.com-香港正版福利彩票| www.108833.com-合乐彩票app| www.239722.com-王者彩票提不出现| www.372145.com-彩票每日签到送现金| www.539773.com-福州体彩中心电话| www.472342.com-男主中彩票小说| www.919571.com-江苏快三多少一注| www.937922.com-87云彩店app| www.58ot.com-彩票欠钱-| www.184163.com-河北快三套选说明| www.529523.com-排列三号码家彩网| www.678465.com-赠送彩金棋牌| www.803606.com-6762彩票网下载| www.921959.com-彩神8快3苹果版| 500彩票www.652631.com| www.06ye.com-澳门五星彩开奖| www.286999.com-玩百姓彩票-| www.8241.top-万博彩票下载| www.32619.com-cc国际彩球网| www.430888.com-江苏彩礼一般多少钱| www.243063.com-购彩者手机在线| www.xj42.com-好彩客安卓官方下载| www.781745.com-彩名堂下载苹果版| www.884698.com-鳄鱼彩票猪八戒| www.961248.com-网上玩彩票快输死了| 彩票5www.515049.com| www.mc75.cc-808彩吧-| www.f86.cc-华人时时彩登录网址| www.044927.com-大乐透彩神通| www.133775.com-福利彩票快三查询| www.572692.com-买足球竞彩会不会亏| www.ys57.cc-500彩票用户注册| www.217611.com-大发财彩票-| www.306030.com-彩票大奖机选多| www.261891.com-大众彩票注册送体验| www.2803.cn-足球彩票基础知识| www.571390.com-华人彩官方网站| www.359581.com-大马彩开奖结果| www.459009.com-下载广西快三| www.669385.com-双色球彩票截止时间| www.770278.com-好彩4宝珠-| www.451567.com-幸运分分彩网站| www.715802.com-双色球众彩网预测| www.791499.com-开体彩店心得| www.880865.com-澳博快开彩票| www.959729.com-发彩网网站官网| www.gl10.com-快三投注技巧大全| www.l23.cc-棋牌彩票代理| www.329239.com-彩8彩票app下载| www.81hx.com-乐投彩合法吗| www.001.red-非凡彩票合法吗| www.03983.com-聚象彩-| www.566754.com-青岛市体彩彩票中心| www.cai6767.com吉林省体彩-| www.15kh.com-澳门彩票平台下载| www.158440.com-体彩店有北单买吗| 全民乐彩票www.qml1.com| www.296819.com-红旗彩票一分快三| www.903306.com-高频彩吧登录网址| www.972375.com-福彩3d魔鬼图表| www.cp696.com-青海快三平台| www.360117.com-为什么私彩庄会赢| www.487813.com-福彩3d分解大帝| www.560866.com-福彩布衣胆码| www.623206.com-彩票如何造假| www.706510.com-87彩票邀请码| www.37876.cc-天天中彩为什么被封| www.935596.com-红包彩票-| www.797373.com-98彩票s-| www.863243.com-60彩票送彩金| 彩票58www.589196.com| www.8sc.cc-时时彩架设源码| www.063625.com-中国福利彩票加盟费| www.140621.com-南海快三时刻表| www.19ib.com-玩时时彩赚钱心得| www.44956.com-希望彩票官网骗局| www.055256.com-彩票云南快乐十分| www.161608.com-中国体彩足球竞猜| www.820456.com-道教灵符彩票中奖符| www.889278.com-彩川ひなの番号| www.999521.com-玩快三会被抓吗| www.ye9.com-彩神8是真的吗| www.nt17.com-福彩3d今日试机号| www.871569.com-南京丰彩涂料| www.965649.com-699彩票提现不了| www.cai172.com-江西快三开奖| www.68615.cc-滕华诚信竞彩实体店| www.864489.com-优信彩票登陆| www.70218.com-永旺彩票网平台| www.1058.net-卖彩票需要什么条件| www.5913.biz-泰国十分彩-| www.2339.me-褔彩票开奖号码| www.865962.com-彩票开奖大全安装包| www.964086.com-彩票网168-| www.mt.cc-彩票分析软件哪个好| 天天彩票www.7782n.com| www.771584.com-山东高频体彩扑克牌| www.833723.com-赢家彩票用户注册| www.887127.com-九度彩票是真的吗| www.947311.com-竞彩足球14场| www.984885.com-彩运8下载安装| www.yp.com-中国福利彩票快3| 金冠彩票www.c4523.com| www.cx57.com-福彩3d金码杀码| www.07rz.com-最近彩票-| www.96ej.com-钱龙博亚彩票网站| www.14011.com-时时彩怎么计算号码| www.982.website七星彩奖虫-| www.5421.vip-四川体彩投注站| www.12uf.com-吉林快三分析| www.687478.com-出名的彩票销售系统| www.513948.com-彩票店接受微信投注| www.655948.com-彩票开发违法吗| www.171719.com-买贵州快三-| www.814223.com-福彩排列期开奖日期| www.919.xyz-7星彩号码机选| www.70kf.com-福彩三地中奖信息| www.0552.net-彩坛双龙独胆| www.5083.pw-足彩竞赛app| www.02577.cc-二元彩票网站| www.rf33.com-中国体育彩票帷胜| www.21mw.com-8618彩票-| www.317365.cc-七乐彩玩法规则| www.609914.com-百彩网资料网址| www.825638.com-四川福骰快三| www.901206.com-体彩试机号金码关注| www.ah91.com-七星彩规律图| www.td13.com-竞彩足球玩法| www.01.hk-宁德体彩站点| www.76fh.com-今晚七乐彩的号码| www.cp1700.com-幸运快三计划单双| www.pj80.cc-一定牛北京快三| www.91633.cc-欧盟好彩产地| www.084554.com-体彩机连接电视方法| www.99391.cc-首选500体彩网| www.067505.com-群英会走势图彩经网| www.126107.com-彩88彩票专家| www.187520.com-重庆市彩时彩结果| www.242113.cc-2元彩票怎样下载| www.415765.com-河北快三怎么买| www.588655.com-开开心心七星彩网| www.681913.com-微信众创中华彩| www.015016.com-数学几何在彩票| www.233755.com-福彩3d大小走势图| www.187851.com-时时彩改为20分钟| www.282962.com-沂风沂俗彩票秘密| www.69209.com-众博彩票怎么进不了| www.27897.com-足彩中奖去哪里兑奖|