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天

知道了
1分快三 www.969362.com-德国彩虹计划| www.ce30.com-快三亏-| www.zv18.com-彩虫七下载-| www.io53.com-手机投注彩票| www.325638.com-今晚七彩开奖结果| www.628883.com-好彩客破解-| www.3934.top-女方彩礼钱法律规定| www.78396.cc-九鼎彩票是不是骗局| www.710586.com-彩票怎么买能套现| www.951439.com-今日足彩分析预测| www.0707.cn-彩票站迁移申请书| www.083968.com-福彩动物总动员公式| www.025445.com-徐文轩彩票预测网| www.195232.com-网彩投注代理平台| www.870196.com-怎样购买双色球彩票| www.972936.com-6698彩票下载| www.1175.net-花生彩票真假问题| www.56395.cc-彩富之家-| www.054982.com-出租体育彩票机器| www.163369.com-易彩3d彩票-| www.871611.com-福彩3d过滤缩水器| 手机购彩www.5109.cc| www.14ru.com-安徽省省体彩中心| www.5440.in-双色球杀号新浪爱彩| www.61047.com-福豪彩彩票可信吗| www.527111.com-博盈彩票怎么样| www.657096.com-竞彩篮球销售时间| www.84788.cc-佩奇彩票登录| www.369603.com-七乐彩技巧-| www.lr91.com-老时时彩360结果| www.670373.com-3d福彩今日谜语| www.783966.com-网彩什么开售| www.922835.com-福利彩票可以过户吗| 中国福利彩票www.6364h.com| www.613093.com-新加坡乐和彩公司| www.752960.com-速赢彩app下载| www.912258.com-网上买彩票犯法么| GO彩www.ban54.com| www.486.tv-奖多多安全购彩页面| www.753608.com-彩票12彩票-| www.443687.com-色彩基础知识| www.39sl.com-彩虹颜色顺序带图片| www.806104.com-众彩网双色球论坛| www.173682.com-资金安全的快三平台| www.331189.com-如何看彩票趋势图表| www.6059.biz-碧彩电子秤维修电话| www.94130.com-足彩胆预测-| www.067683.com-网上彩票哪个靠谱| www.134986.com-彩票如何看走势| www.233365.cc-体育彩票app官方| www.316389.com-上海快三今天推荐| www.400710.com-七星彩本期局网图纸| www.863897.com-159彩票网正规吗| www.985398.com-关小刀足彩预测推荐| www.z30.xyz-时时彩赢彩王好用吗| www.91up.cc-玖富彩票平台怎么样| www.3526.cn-微彩官方-| www.39753.cc-今晚七星彩开奘结果| www.21696.cc-荣兴彩票官方网站| www.005347.com-彩票砍龙概率| www.113943.com-彩涂合金铝卷| www.200598.com-彩票123没有了| www.304619.com-网上彩票投注站| www.759512.com-重庆时时彩视频开奖| www.893329.com-七乐彩过滤软件| 多乐彩票www.299494.com| www.338476.com-a6118彩票安卓| www.op5.com-快三对子技巧顺口溜| www.518187.com-牛彩票网主页| www.085047.com-体育福利彩票app| www.zm4.cc-5d彩票规则介绍| www.06bu.com-甘肃省体彩官方网站| www.62213.cc-稳定老娱乐购彩平台| www.054291.com-大发快三和值推荐| www.85ze.com-七乐l彩号码走势图| www.17674.com-菠菜网注册送彩金| www.pr43.com-湖南福利彩票网站| www.wp71.com-高频彩票开奖| www.yd36.com-韩国彩票种类| www.885.website九五彩票-| www.9910.com-公益彩票app首页| www.383457.com-台灣彩虹旗娛樂論壇| www.029589.com-新利彩票能控制吗| www.95564.com-安庆福利彩票网点| www.315374.com-彩虹棋牌比机有挂吗| www.000657.com-多彩网投注可靠吗| www.975071.com-七星彩规律图视屏| www.5409.org-彩票38-| www.66634.cc-福彩数字三开奖号码| www.254542.com-8k彩票app下载| www.713682.com-王者彩票在线| www.67ta.com-彩票代领协议| www.5108.cm-天津体彩客服电话| www.35615.cc-百盈快三每期计划| www.069064.com-彩票高手完整视频| www.878046.com-彩票快三讲座视频| www.5mj.com-打彩怎么玩-| www.137.mobi-夸女人好看的彩虹屁| www.111674.com-彩票七天乐下载| www.367831.com-筒井彩芽照片| www.971362.com-88彩票软件-| www.95274.com-开体彩注站怎么样| www.128526.com-超级彩票16亿| www.252722.com-腾讯一分彩计划软件| www.441698.com-体彩销售提高技巧| www.873138.com-中国体彩下载安装| www.35iq.com-7星彩论坛808| www.95om.com-类似多彩投的app| www.05307.com-怎么玩分分彩压大小| www.71766.com-香港天空彩票资料| www.051264.com-彩票开奖号码双色球| www.177328.com-幸运快三是哪里的| www.318226.com-彩虹伞最实用的玩法| www.553969.com-篮球彩票胜负推荐| www.01086.com-中国足彩网即时赔率| www.226806.com-福彩双色球二三等奖| www.9937.loan-订婚的钱算彩礼钱吗| www.021160.com-优游彩票登录| www.120315.com-5分快三软件| www.466225.com-云彩娱乐-| www.81695.com-福利彩票每周几开奖| www.143400.com-福利彩8在哪发计划| www.613441.com-买彩票的正规app| www.k37.xyz-体彩排列五规则| www.4805.live-彩虹6号腾讯| www.257034.com-中国正规快三| www.288031.com-内蒙古福彩苹果下载| www.267998.com-彩乐乐遗漏统计| www.wg05.com-彩迷吧-| www.84966.com-福彩群英会任三遗漏| www.083788.com-买彩票输了-| www.567776.com-足彩第19046期| www.688298.com-东莞体育彩票兑奖| www.217164.com-地区快三是官方的吗| www.354422.com-双彩网双胆3胆| www.102066.com-竞彩篮球投注| www.27pl.com-熊猫福彩真的假的| www.3581.xyz-微彩彩票代理| www.30967.com-福彩3d开什么奖| www.556983.com-买彩票真有中奖的吗| www.594485.com-彩神之首双色球三股| www.425.mobi-投彩网c97-| www.459033.com-淘彩有风险吗| www.070786.com-彩礼是什么意思| www.320878.com-福彩开奖预测| www.829292.com-彩九怎样进直播| www.131434.com-郑州彩礼6万6| www.745814.com-排三百位走势大彩网| www.863250.com-高频彩票数字原理| www.166643.com-一分快三开奖号码| www.2pi.com-鸿彩快三合法吗| www.640300.com-新浪爱彩真的假的| www.028569.com-体彩七位数开奖时间| www.169306.com-大发快三走势图今天| www.273316.com-千亿彩票怎么样| www.733084.com-南京体彩中心人员| www.13533.com-新浪爱彩任九投注| www.398894.com-淮南福彩中心地址| www.691036.com-十四场足彩直播| www.040704.com-博彩套利方案| www.96784.com-专家剖析彩票造假| www.185845.com-玩快三的人多吗| www.56916.cc-时时彩稳定大底计划| www.319861.com-易彩网注册邀请|