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天

知道了
58福彩 www.789170.com-彩妆盘-| www.937756.com-体彩第19007期| www.996314.com-北单购彩app| www.ab51.com-上海快三三同号推测| www.vr74.com-甘肃快三微信群号| www.22jq.com-大豪客彩票平台| www.2471.xyz-彩客游戏币在哪兑现| www.9011.com-体彩nba官网| www.57737.cc-福彩丹东全图总汇| www.055737.com-福利彩快8怎么下载| www.150976.com-正规的彩票销售系统| www.277032.com-bb3d是什么彩票| www.072958.com-福彩定位杀号技巧| www.192713.com-彩票发财的征兆| www.291387.com-私彩黑平台-| www.361681.com-体彩8+3规则| www.31865.com-足球胜平负竞彩| www.072813.com-41c彩票-| www.137285.com-凤凰彩票登录| www.231300.com-彩票倍投追号计算器| www.317998.com-谁有彩票公式| www.387511.com-手机彩膜图片素材| www.617189.com-买彩票丢了-| www.181372.com-安徵省快三开奖| www.320996.com-五洲彩票登录网址| www.430068.com-水彩笔套装-| www.537120.com-彩起名字-| www.906655.com-福利彩票号码是哪些| www.979315.com-内蒙古快三统计表| www.jm75.com-玩快三输钱了怎么办| www.fy6.com-内蒙古福彩快三预测| www.d74.cc-彩票狂人-| www.614414.com-彩票专家推荐平台| www.59928.com-幸运快三qq群骗局| www.125170.com-刮刮乐彩票叫卖语| www.215083.com-福彩彩宝网开机号| www.290833.com-内蒙古体彩网大乐透| www.375255.com-小小鱼版一彩吧图谜| www.540009.com-休闲快三醉人的花香| www.626994.com-银雀彩票-| www.682771.com-2019体彩新规定| www.733699.com-彩票分分pk-| www.871944.com-时时彩手机缩水软件| www.i29.top-酷彩吧app安卓| www.520747.com-福彩历史中奖号码| www.655265.com-七乐彩中奖彩票| www.777313.com-赚钱彩票10元充值| www.869742.com-唯彩会彩票旧版本| www.945819.com-三门峡彩礼价目表| 惠民彩票www.hm5222.com| www.317544.com-体体彩排列五| www.475158.com-金誉彩票网电脑版| www.586612.com-彩83.net-| www.661923.cc-竞彩串关中奖分析| www.781924.com-彩票软件源码排行榜| www.859266.com-体彩6十1中奖说明| www.925130.com-体彩专家杀号定胆| www.974802.com-凤翔彩票app下载| www.fk25.com-内蒙古福彩快三遗漏| www.xo52.com-易旺彩票网-| www.515438.com-彩票8亿涉案| www.644844.com-体育彩票中奖者| www.770136.com-好彩头网站-| www.859916.com-十分彩的骗局| www.924951.com-傲赢彩票在哪儿下| www.981634.com-中国体彩报下载安装| www.fh14.com-快三注册就送28元| www.ww70.com-南方双彩最专业| www.09bv.com-611彩票-| www.82gs.com-幸运快三在哪看开奖| www.1840.com-2525彩票app| www.23816.com-体彩公司有哪些| www.66702.com-福彩3d助手安卓版| www.029743.com-体育彩票app排行| www.102571.com-马来3分彩开奖网站| www.165753.com-黑龙江省福彩中心| www.265393.com-竞彩网易网推荐| www.40gu.com-杭州体彩中心官网| www.3640.win-嘉定机选中奖彩民图| www.05246.cc-彩票能用手机买吗| www.51144.cc-喜盈盈彩票网| www.95885.com-公益体彩下载| www.059238.com-七星彩开将-| www.188746.com-快三中了两个号码| www.258971.com-内蒙古快三和值图| www.796586.com-体彩竞猜输了好多钱| www.cp5348.com-吉林快三走势| www.rm94.com-基诺彩的诀窍| www.22hp.com-海口七星彩早版区| www.097.me-盈彩网app邀请码| www.3400.wang-彩情报49-| www.8825.in-海南飞鱼彩票| www.132029.com-彩礼钱爸妈不给女儿| www.253622.com-博众时时彩软件官方| www.999563.com-三的试机号今天福彩| www.qq71.com-体彩有几种玩法介绍| www.04gi.com-彩铅人物速写| www.293725.com-易旺彩票购彩大厅| www.397055.com-彩票会员内部资料| www.831071.com-248彩票网址| www.890162.com-彩名堂计划怎么下载| www.959030.com-美国彩票强力球玩法| 500彩票网www.97655d.com| www.em14.com-福彩3d彩吧图| www.uj13.com-内蒙古快三直播间| www.03ze.com-水溶彩铅哪家好| www.67pr.com-七乐彩尾数分布图| www.0501.top-大乐透彩票怎样兑奖| www.35758.cc-鼎天极速三分彩| www.028152.com-彩票验票码怎么用| www.104064.com-中免红好彩什么味道| www.167297.com-北京快三一定牛| www.278863.com-大发云彩票骗局| www.356581.com-金凤凰彩票投注网| www.432151.com-福彩3d中奖说明| www.509321.com-河内5分彩软件| www.574422.com-电信彩铃网站| www.638917.com-厦门体彩办理| www.949576.com-甘肃快三技巧稳赚| www.986554.com-360彩票567-| www.cp8866.com-兼职代玩彩票靠谱吗| www.lv21.cc-时时彩开奖号码| www.b72.cc-江西省福利彩票中心| www.35kq.com-power彩票-| www.0464.xyz-体彩网上购买系统| www.5898.tv-提亲的时候给彩礼吗| www.03631.com-七星彩接单骗局| www.39761.com-玩彩票上瘾了| www.77352.com-955彩票规律| www.021293.com-彩票拉菲平台| www.081396.com-足彩跟单软件下载| www.133636.com-福彩自助精灵靠谱吗| www.200072.cc-七乐彩开奖号码表| www.260946.com-江苏快彩助手下载| www.420266.com-中国大乐头彩票| www.509381.com-利彩网页版-| www.567816.cc-彩22网站-| www.623706.com-鸣彩艺术-| www.679106.com-彩票返点怎么调| www.742622.com-珐琅彩蛋-| www.800133.com-自制彩票走势图| www.850075.com-美国一分彩走势图| www.902828.com-彩帝彩票客服平台| www.951626.com-红彩直播app| www.983846.com-福利彩票跑马咋中奖| www.924.mobi-彩票代售点利润| www.457529.com-助手本子全彩无翼鸟| www.583755.com-彩色的非洲课文| www.656651.com-欧洲杯彩票玩法| www.751600.cc-万利彩平台地址| www.818500.com-大乐透新浪爱彩走势| www.896488.com-广西彩票未领奖| www.961491.com-福利彩票中奖攻略| 七天彩www.00665g.com| www.cs33.com-重庆时时开奖乐彩网| www.rm64.com-福利彩票吉林快3| www.04yr.com-美丽的校园彩铅画| www.64ke.com-福彩3d五线选号法| www.855.pw-时时彩五星最稳| www.569628.com-香港管家婆图库彩图| www.692966.com-体彩网点号查询| www.761953.com-大发时时彩后二计划| www.872274.com-有几个中彩网| www.948812.com-好运快三正规吗|