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.157349.com-彩票之家手机网站| www.302111.cc-南国七星彩特区论坛| www.631851.com-竞彩一月赚10万| www.054518.com-祥云瑞彩图片大全| www.no8.com-3d彩经网走势图| www.373068.com-彩票cp-| www.466787.com-七乐彩4个号有奖吗| www.34213.com-上海时时彩-| www.79281.com-线上体彩怎么赚钱| www.bg77.com-彩票计划是不是骗局| www.5al.com-黄好彩爆珠多少钱| www.pa3.cc-买彩票怎样选号码| 500彩票网www.65707y.com| www.m25.org-2345彩票靠谱吗| www.460.live-乐彩客彩票下载安装| www.221311.com-苹果版重庆时时彩| www.oe97.com-极速快三彩票| www.20oo.com-福彩双色球网易杀号| www.184.biz-大发彩票总部电话| www.29dv.cc-福利彩票手机彩票| www.1814.org-cc彩8-| www.8664.cc-七星彩史上巨奖| www.46522.com-今天好彩3开奖结果| www.385295.com-竞彩误差是什么意思| www.522838.com-18121期胜负彩| www.603152.com-彩虹六号中国干员| www.7176.biz-a7时时彩娱乐| www.56341.com-会发彩票-| www.619548.com-田伟足彩任九| www.709589.com-彩票网站忽然打不开| www.875465.com-亚投彩票app| www.974961.com-体彩大乐透中奖说明| www.1338.vip-体育彩票开奖结果是| www.40572.com-特网彩票分析系统| 大赢家彩票平台www.317990.com| www.26qw.com-福彩3d专家排行| www.68678.cc-各大彩票一等奖概率| www.082591.com-彩票下一期开奖时间| www.229120.com-晚晚好彩开奖号码| www.335763.com-彩票开奖日期星期几| www.438005.com-汕头彩票中奖新闻| www.07dp.com-麋鹿好看彩铅画教程| www.0518.top-中科公益彩票| www.974273.com-即时开奖的彩票软件| www.cai6433.com甘肃兰州快三走势图| www.ta18.com-必赢彩票为什么没停| www.79ft.com-彩票性缘目录| www.5705.cn-天然三彩翡翠价格| www.39521.cc-手机体育彩票靠谱吗| www.018635.com-中彩彩票骗人| www.128162.com-3d字谜彩吧-| www.244866.com-鄂尔多斯体彩| 500万彩票www.5441d.com| www.8998.online下载彩票软件网| www.85056.com-聚彩彩票提现得了吗| www.083912.com-快乐彩官方网站| www.154959.com-足彩今日单关| www.225295.com-福建体彩官方网| www.292577.com-北京快三高频开奖| www.c52.top-苏快三开奖-| www.1861.tv-有什么彩票软件| www.nw83.com-吉林快三和值和跨度| www.65zf.com-华彩娱乐骗局| www.8807.vip-七彩直播破解版| www.86968.com-彩宝贝3d十位杀号| www.151540.com-3d字谜多彩网| www.277595.com-乐彩赢官网-| www.393484.com-今天彩票开什么号码| www.551443.com-彩票扫一扫中奖没| www.62jg.cc-计算器足彩网胜平负| www.6505.vip-长城彩票官网可靠吗| www.51258.com-福彩三地开机号分析| www.036477.com-私彩十一选五平台| www.179683.com-彩客网-| www.315370.com-a7彩娱乐登录注册| www.486864.com-足彩奖池多大| www.640052.com-222彩票app-| www.920758.com-幸运5分彩可信吗| www.cai2424.com湖北今天快三| www.jn17.com-贵州快三选五一定牛| www.11ll.cc-帮别人搭建彩票| www.3610.vip-去彩票店买彩票尴尬| www.33639.cc-彩色沥青多少钱一吨| www.113264.com-94彩票-| www.218522.com-分分快三选号规律| www.387451.com-手机彩膜打印机| www.538791.com-爱心彩票app| www.718247.com-彩虹七色光谱| www.965203.com-大发快三有没有规律| www.ln04.com-官网彩票哪些正规| www.45sq.com-广西快乐双彩走势阁| www.1235.space-乐讯吹吹七星彩论坛| www.00188.cc-爱投彩票是真的吗| www.159007.com-海南体彩网-| www.290323.com-彩宝彩票是骗局吗| www.414038.com-七彩幼教集团| www.560538.com-体彩五d今天推荐号| www.99157.cc-时时彩哪种玩法挣钱| www.372710.com-八彩娱乐app| www.30090.com-足彩比分直播雪缘网| www.333299.com-每日充赠彩票| www.933980.com-体彩十分钟开奖技巧| www.90uy.com-917彩票下载| www.349170.com-怎样分析彩票买法| www.678866.com-十分彩江苏快3| www.13463.com-火星彩票诈骗| www.215717.com-青海快三平台网址| www.463666.cc-万豪彩票是真的吗| www.586335.com-登录福彩诈骗| www.59yk.com-河南省体育彩票网站| www.0540.net-北京中国体彩报| www.6307.cn-彩铝板干嘛用| www.11300.cc-烟台福利彩票站地址| www.70452.com-e58彩票-| www.060098.com-彩票十一选五内蒙| www.180551.com-甘肃福彩快三走势图| www.276819.com-彩之源彩票app| www.360774.com-新彩票安卓版下载| www.435792.com-ct彩投网-| www.579.in-彩风暴金原创50| www.7847.vip-视频彩票伪随机| www.43369.com-旺旺彩票公司| www.113085.com-七乐彩守号规律| www.237924.com-彩票狂人陈柏华| www.366725.com-青蛙彩手机开奖现场| www.550791.com-500彩票合买| www.657796.com-手机分分彩软件苹果| www.782520.com-福星中彩49-| www.cp3518.com-广西快三中奖助手| www.sm87.cc-彩票私庄判刑| www.010.pink-全球彩票可靠吗| www.6878.me-爱上彩票下载安装| www.45339.com-第一彩票官网| www.025826.com-包头福彩中心| www.143290.com-手机打彩票赚钱吗| www.245299.com-竞彩足球比分开奖| www.339603.com-新彩吧3d总洰| www.465866.com-福彩3d今天字谜图| www.582666.com-足彩4场进球彩预测| www.671222.com-万彩吧彩票开奖直播| www.800031.cc-体育彩票如何看中奖| www.959420.com-彩票有没有规律| www.fi46.com-中国体彩网官网| www.5yd.com-彩哥腾讯分分彩| www.137437.com-彩票下级返点越高| www.30uk.com-香港天空彩与您同行| www.25038.cc-48色彩铅色卡| www.155430.com-3d彩票怎么打| www.380567.com-京东体彩体验店开业| www.659503.com-字谜图迷新彩吧| www.823456.com-锦晖彩涂铝卷| www.954629.com-国外彩票的真实性| www.639278.com-彩票直通车下载| www.789887.com-买七乐彩怎么中奖快| www.08wd.com-体彩列三了今天开奖| www.5481.vip-长春福彩3d开奖号| 澳客网www.okw5.com| www.82.cm-杏彩论坛-| www.8386.loan-360安全购彩网| www.91332.cc-欧盟好彩-| www.165314.com-快三手机版破解器| www.278365.com-彩票分分钟开奖软件| www.564588.com-时时彩五码技巧方案| www.b31.cc-跑马幸运彩-|