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.67690.com-彩票与刑法赌博| www.104200.com-福彩23选5怎么玩| www.274587.com-快三是真的还是假的| www.590336.com-苏宁彩票智慧门店| www.668853.com-百度华人彩票| www.145982.com-310足彩专家预测| www.982402.com-分分时时彩开奖查询| www.pb89.com-体彩打票机键盘图| www.59vx.com-体彩新机器交押金| www.102341.com-qq彩票还可以买吗| www.025316.com-多乐彩计算法| www.170055.com-今日甘肃快三预测| www.260031.com-宁夏快三第51期| www.338457.com-五福彩票网上晒照片| www.429678.com-玛雅彩票游戏官方| www.525331.com-时时彩返点什么意思| www.596007.com-彩票兑奖方法| www.667155.com-3b福彩实战擂台| www.739208.com-百盈快三百盈时时彩| www.810737.com-时时彩挂机软件| www.881806.com-玖富彩票登陆| www.951014.com-哪个彩票软件可靠| 熊猫彩票www.111xm.cc| www.929922.com-福牛牛彩票网官网| 乐8彩票www.cp369.net| www.955642.com-彩泥大全-| 福利彩票www.78700k.com| www.fo71.com-三分快三计算公式| www.77381.com-众乐彩官网下载| www.369029.com-中彩网开奖首页| www.514711.com-澳洲彩票种类| www.875413.com-福利彩票群规则| www.155641.com-福彩新快三开奖| www.294552.com-福彩快三走势图上海| www.403575.com-天下彩xc6cc| www.552944.com-1588彩票-| www.719752.com-福彩三d字谜今天的| www.962574.com-旺旺彩票二维码| www.282558.com-时时彩五星稳定条件| www.540405.com-51彩票注册-| www.ps05.com-933cc彩票-| www.26121.com-彩吧下载官方| www.167589.com-安徽快三开奖查询| www.618787.com-深圳足彩分析师招聘| www.962086.com-足球彩票怎么买输赢| www.97il.com-彩排的是什么意思| www.765652.com-e球彩怎么算中奖号| www.2824.biz-七星彩开奖预测宝贝| www.63722.cc-网上竞彩投注员骗局| www.4694.biz-美即彩宝官网| www.54177.com-时时彩的最新漏洞| www.057908.com-3d福利彩票资料| www.184330.com-网络彩票骗局大揭密| www.025891.com-德信彩票网007| www.259627.com-广西福彩软件| www.573872.com-808彩吧坑人吗| www.894797.com-彩票中奖地区查询器| www.dc53.cc-约彩彩票app下载| www.92mm.cc-九州彩金怎么刷| www.72674.com-精彩的反义词| www.143326.com-内蒙福彩公众号下载| www.284065.com-有彩色系-| www.387766.com-大富贵彩票-| www.737709.com-玩彩送彩金的网站| www.963326.com-彩铅樱花树-| www.39961.cc-巴彩票app-| www.087812.com-双色球易彩网下载| www.372717.com-中超彩票在哪里买| www.707466.com-本港彩票资讯网| www.950340.com-乐彩网怎么打不开| www.sr35.com-新浪彩票3d-| www.9721.net-优彩师真的假的| www.70799.com-快乐彩计划| www.520507.com-非法网络彩票赌博| www.0234.cn-众乐彩骗局-| www.70236.com-精彩-| www.920657.com-200w彩票-| www.044886.com-快彩app电视| www.275729.com-快三平台作弊软件| www.5038.vip-购彩之家991| www.98982.cc-一分时时彩怎么玩法| www.170233.com-河北福彩快三走势图| www.356302.com-数学算法买彩票3d| www.278851.com-福建体彩网31选7| www.118053.com-河南体彩网官方网站| www.374550.com-天下彩天天好彩| www.576241.com-河北省快三遗漏之| www.755511.com-重庆体彩中心地址| www.907733.com-大亨时时彩手机版| www.fx26.com-彩票群名-| www.512742.cc-今天足彩比赛比分| www.c4.net-安微快三预测和值| www.539134.com-567彩票跑路了吗| www.4578.in-欢乐彩票平台| www.37238.com-奖多多一彩票下载| www.0962.vip-4场进球彩技巧| www.139565.com-澳门赌博技巧彩票| www.781990.com-福彩3d绝对布衣3| www.w60.com-中彩票幽默感言| www.286566.com-3d彩吧图一版| www.ud68.com-乐和彩app-| www.840052.com-福利彩票改变什么| www.720280.com-七乐彩胆拖玩法| www.162152.com-足彩胜平负都选多钱| www.hk32.com-买彩票怎么赚钱| www.481572.com-亿乐彩彩票-| www.310653.com-官方彩网址-| www.74ew.com-排三预测乐彩| www.874659.com-福彩浙江快乐彩开奖| www.33212.cc-老版全民彩票| www.868711.com-七星彩票app| www.8823.club-彩9线路检测| www.4513.cc-14场胜负彩销量| www.cai1998.com江苏快三形态走势图| www.069339.com-北京体彩官方网站| www.855800.cc-七乐彩中3个号| www.906202.com-彩票105-| www.i45.biz-银川体彩中心电话| www.788381.com-雪缘彩票首页| www.964694.com-360彩票计算机| www.536297.com-深圳抱团买福利彩票| www.675965.com-结婚10万彩礼多嘛| www.890027.com-花生彩票是骗局揭秘| www.74xi.com-北京彩民商城| www.41933.com-彩12彩票下载| www.751290.com-彩票破了可以兑奖| www.68iq.com-福彩3d打击黑彩| www.793930.com-新浪彩票电脑网页版| www.318204.com-彩博-| www.877386.com-七星规律百姓彩票网| www.hv94.com-北京彩票预测中心| www.55416.com-体彩有多少位数字| www.h82.club-这期彩票中奖号码| www.338141.com-梦见家人彩票中奖了| www.559848.com-大乐透牛彩网杀号| www.qw77.com-在快三上能赚钱吗| www.32sk.com-中彩网高手社区| www.161785.com-分分彩平台官方下载| www.925709.com-彩富网香港资料大全| www.71621.com-3d天天彩吧-| www.435449.com-彩票33-| www.fk23.com-福彩十分钟一期的是| www.1730.com-腾讯分分彩五星复式| www.069310.com-河北福彩网站| www.330938.com-彩票高频走势图软件| www.3803.vip-南国开心七星彩论坛| www.898937.com-优信彩票大-| www.178825.com-体彩开奖-| www.70600.com-彩吧彩票合法吗| www.573784.com-吉林快三是什么彩票| www.811345.com-彩蛋是什么意思| www.64pt.com-足彩概率指数| www.659704.com-高频彩直播开奖网站| www.ad08.com-福彩3d开奖奖号| www.qm07.com-乐彩33众飞-| www.07559.com-中彩那天微型课视频| www.650356.com-中国体育博彩合法吗| www.xq66.com-体彩35期开奖结果| www.cp9553.com-中彩网福彩3d| www.n00.space-京彩国际app| www.984.com-七星彩连着5个号| www.209423.com-快三赚到钱吗| www.520412.com-福彩快三为何限号| www.691972.com-彩经网遗漏数据|