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.115129.com-澳客网彩票| www.vu62.com-苏州快三的开奖| www.98no.com-手机彩票平台可信不| www.5785.vip-亚洲人肉彩漫图片| www.25976.cc-彩虹是那七色| www.407155.com-苏州彩铃-| www.94073.com-彩色耐磨地坪图片| www.183018.com-vip彩票官方平台| www.301039.com-福彩七乐彩中奖概率| www.412250.com-重庆试试彩技巧| www.518089.com-福彩牛材网预测| www.810404.com-今天七乐彩开结果| www.898727.com-福彩试机号走势图| www.966358.com-福彩三d今天必下| 新盈彩www.xinyc3.com| www.mm31.com-重庆时彩开将结果| www.45ky.com-彩虹6号游戏介绍| www.0630.vip-双色球颖彩-| www.298002.com-快三数字组合图片| www.02411.cc-上海彩票大奖弃奖| www.67009.com-安阳彩票大奖骗局| www.309280.com-失控的黑彩-| www.r88.biz-网上江苏快三| www.81la.com-开福利彩票赚钱吗| www.lz.cc-体育足彩竞彩网| www.666316.com-够力匕星彩票奖表| www.760119.com-五福彩票最新版| www.858648.com-福彩现场开奖直播| www.922434.com-彩妆店装修图片| www.979262.com-福彩3d最未出号码| www.tb5.cc-福彩三d开奖| www.984602.com-彩虹8彩票代理| www.ak98.com-5亿彩网骗局揭秘| www.yc01.com-七星彩历史开奖| www.48ay.com-福彩投注站怎么开| www.0587.org-福彩3d东湖社区| www.79132.com-手机彩铃制作| www.cp0358.com-上海快三跨度图| www.tt74.com-网上哪里还能买足彩| www.859206.com-刚力彩芽生活照| www.938342.com-非法彩票网站受害者| www.998827.com-香港行政快三开奖| www.gc98.com-老彩民网站-| www.8576.wang-大乐透开机号家彩| www.414164.com-精彩是什么梗| www.552553.com-福建多金彩走势图| www.625603.com-七星彩19043期| www.691812.com-自助彩票机违法吗| www.777644.com-河北福彩排7走势图| www.zs34.com-彩票现-| www.297.cc-网上有人带玩七星彩| www.4847.top-彩票式购物-| www.bx87.com-双彩开奖走势图| www.yu52.com-福利彩票app购买| www.121747.com-上海福彩快3结果| www.037097.com-500彩票软件大全| www.996835.com-快三官方版易发彩票| www.ks14.com-福彩三d今天开奖吗| www.760495.com-自己租个时时彩平台| www.870971.com-陕西快三有吗| www.81524.com-菲律宾博彩招聘骗局| www.101650.com-500彩票真的假的| www.104096.com-香港体彩-| www.397038.com-昨晚彩票号码| www.662252.com-七彩乐开奖-| www.nt80.com-彩宝3d走势图带| www.6qi.com-智慧彩软件挂机| www.72ce.com-cba篮彩竞猜推荐| www.610832.com-华夏彩票黑钱| www.739760.com-中国福利快乐彩玩法| www.69523.com-彩猫彩票正规吗| www.532709.com-福彩三d热议| www.731078.com-最近的彩票快3开奖| www.866.date-鲸鱼彩铅-| www.7313.cc-彩虹游戏-| www.38375.com-k彩进入网站| www.68587.cc-福彩3d当天试机号| www.316957.com-618彩票下载安装| www.18973.cc-旧版爱彩乐-| www.155590.com-炫彩之剑-| www.325945.com-彩经网新版-| www.188000.com-福彩彩种-| www.698717.com-6加1彩票怎么中奖| www.051590.com-赢彩吧官网-| www.009403.com-新彩吧手机版3d| www.13421.com-网络彩票诈骗| www.81839.cc-时时彩追热号的技巧| www.16066.cc-彩票双色球怎么玩的| www.72488.com-彩票有大老头吗| www.863435.com-河北体育彩票排列五| www.950849.com-彩运8真实吗| 购彩堂www.542998.com| www.283675.com-彩票分哪几种| www.063065.com-创彩彩票app| www.895397.com-大佬彩票骗局| www.960705.com-福彩3d山东字谜| 九五彩票www.949430.com| www.75655.cc-模拟彩票中奖| www.019410.com-826网络彩票| www.109621.com-时时彩挂机软件苹果| www.186178.com-快三中两个号有奖吗| www.356053.com-腾讯分分彩可靠平台| www.442325.com-双色球购彩大厅机选| www.cp7588.com-河北快三软件下载| www.677151.com-今天的彩报图第一版| www.757203.com-实时彩出对子概率| www.908642.com-体彩排七星彩玩法| www.971741.com-9万彩票安卓| www.cai4277.com内蒙快三开桨| www.854969.com-彩种可以挂机的平台| www.942795.com-彩票保本平刷买法| 彩天下www.c5615.com| www.885367.com-8体彩屋是真的吗| www.971009.com-万悼彩票-| 500彩票www.783500.com| www.502335.com-热拉的彩票骗局| www.982043.com-福利彩票官方投注器| www.dc04.com-全民快三下载首页| www.p05.cc-微彩是啥-| www.37zq.com-七彩乐带坐标走势| www.557.cm-博悦分分彩免费下载| www.3819.xyz-今天开奖七星彩图| www.9951.cc-595kcc彩票-| www.38589.cc-大奖彩票首选网站| www.77422.com-统计学与彩票| www.019976.com-中彩网官网app| www.088679.com-彩神8快三官方| www.138217.com-永安彩票app| www.vv69.com-彩票导师真的假的| www.538128.com-福利彩票国家允许吗| www.18yn.com-大咖荐彩下载| www.262210.com-福利彩票快三改革| www.409038.com-福彩3d电子书下载| www.062304.com-彩16软件-| www.123451.com-开始导航路线彩票| www.222433.com-超准彩票计划| www.57229.com-彩宝宝诈骗-| www.010679.com-491彩票-| 网易彩票www.061wy.com| www.337498.com-免费体验彩金| www.467699.com-体育彩票下期奖金| www.557752.com-双色球彩牛材网字谜| www.555.club-分分彩全天计划软件| www.36861.com-730彩票软件| www.515918.com-只赚不赔的彩票软件| www.611124.com-广西快三封盘时间| www.677929.com-东方红体彩店下载| www.878963.com-幸运二分彩-| www.680567.cc-百乐门彩票真的假的| www.791649.com-下载速赢彩app| www.027614.com-易彩堂合法吗| 发彩www.50732m.com| www.224669.com-北京极速快三助手| www.227734.com-体彩大乐透预测号码| www.925493.com-旭彩网可靠吗| www.996739.com-龙江福利彩票p62| www.ga92.com-福彩害了多少人| www.h41.com-七星彩领奖-| www.56tt.cc-体育彩票店在哪里好| www.618.cm-时时彩预估-| www.385772.com-福彩体彩开奖软件| www.566476.com-幸运彩ˉ幸运二任选| www.648628.com-香港行政快三app| 天朝彩票www.58181.cc|