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.828704.com-永丰彩票-| www.f63.cn-14名福彩官员| www.59vf.com-单注彩票上限| www.0878.date-博彩专业论坛| www.8215.xyz-基诺快乐彩-| www.56kt.com-福利彩票安装官网| www.1474.org-呼和浩特体彩| www.044407.com-福彩门户网址书签| www.50123.com-中国彩合法吗| www.000297.com-专业玩彩工具| www.126624.com-微信可以买彩票么| www.202938.com-精彩十分怎样算中奖| www.950611.com-乐彩客彩票网页版| www.4329.biz-下载福彩在线app| www.318436.com-凤凰vip彩票网站| www.52835.com-时时彩过春节停吗| www.025425.com-喜乐彩票怎么玩| 彩票500万www.cp500.pw| www.lx84.com-快三广西开奖结果| www.p41.net-私彩快三骗局| www.51lj.cc-双色球新浪彩票网| www.0000.blue-彩票挂机稳赚方案| www.5240.cc-彩票派彩合法吗| www.08765.com-福利彩票官方网下载| www.54804.com-彩票预测最简单方法| www.004265.com-彩神单双计划软件| www.352652.com-彩票计划群套路| www.657795.com-百宝世嘉彩票怎么玩| www.779566.com-七星彩票中奖号码| www.854186.com-多彩网投注可靠吗| www.916871.com-彩票平台注册送财金| www.975024.com-七星彩预测网址| www.pg89.com-足彩19052推荐| www.16vw.com-尼彩手机n4-| www.793072.com-黄石福彩中心地址| www.867895.com-信博彩票网官网| www.954326.com-浙江体彩中心地址| 天天彩票www.1035p.com| www.106100.com-彩宝app安卓版| www.246824.com-上海体彩快11选五| www.339485.com-破解速赢彩大小| www.428736.com-小班彩虹伞的儿歌| 众乐彩票www.589244.com| www.894843.com-信彩快三计划| www.123425.com-新昌双彩下岩张玉安| www.200298.com-132彩票安卓官网| www.939282.com-体彩足球单场胜负彩| 博友彩www.371v.cc| www.632.cm-时时彩开奖结果助手| www.7692.loan-三彩女装正品旗舰店| www.31237.cc-易彩趋势-| www.32881.cc-汇彩宝-| www.265740.com-l浙江福彩-| www.564855.com-最可靠的87彩店| www.798256.com-中国体育彩票6等| www.883524.com-福利彩票高频彩计划| www.964006.com-最新彩票双色球分析| www.pl66.com-竞彩足球必发指数| www.636411.com-儿童画画彩虹| www.739642.com-福彩快乐十二软件| www.813869.com-彩票老输钱怎么办| www.885793.com-彩神ⅲ是什么软件| www.957210.com-京彩挂机-| 爱购彩www.23636h.com| www.9755.pw-全民彩票投注技巧| www.54979.com-买彩心得与投注技巧| www.113397.com-福彩3d预测新彩网| www.803706.com-116彩票软件下载| www.902406.com-彩票自助售票机| www.975496.com-湖南省福彩电话| www.cai956.com-快三输钱的原因| www.kb65.com-41c彩票网站| www.585030.com-掌上京彩下载| www.679023.com-易彩网一分快三| www.763074.com-湖北快三走势图网| www.862322.com-彩票88倍-| www.940778.com-快三平台是国家的| GO彩www.fo03.com| www.507252.com-江苏体育e球彩走势| www.618465.com-体育彩票走势图表| www.691309.com-熊猫彩票网址是什么| www.800722.com-3d天天彩吧-| www.924218.com-天天好彩开奖现场| 乐彩www.66069.cc| www.681526.com-辽宁福彩中心地址| www.791247.com-安阳福利彩票贴吧| www.883813.com-博彩王软件怎么样| www.mt85.com-彩神8快3违法吗| www.946838.com-上海彩钢-| 500彩票网www.65707x.com| www.072.in-彩16靠谱吗-| www.6161.me-彩票会员赚钱真的吗| www.833669.com-没税标无嘴好彩| www.903281.com-幸福彩票是什么| www.965942.com-竞彩足彩吧-| 彩民网www.79520d.com| www.396508.com-星期四开奖的体彩| www.657711.com-澳客彩票安卓版| www.059466.cc-浙江宁波快三查询| www.773037.com-快三过滤缩水器| www.019037.com-苏州市福彩兑奖地址| www.121239.com-福彩3d平台微信| www.907408.com-vr3分彩开奖号码| 博乐彩票www.35918c.com| www.qf07.com-新版彩票77-| www.979527.com-好彩印第安铁盒| www.ce53.com-优彩社区正版| www.o63.biz-可以赠送彩票| www.41mm.com-万福彩票官网| www.036024.com-北京5分彩免费计划| www.130432.com-彩票中奖指南有用吗| www.254737.com-118彩票网络平台| www.413838.com-腾讯分分彩八码计划| www.519627.com-牛人彩票软件下载| www.998985.com-湖北快三热的早知道| www.je32.com-128彩票app-| www.578619.com-福利彩票形象店图片| www.692978.com-伯爵国际彩票骗人| www.769957.com-好彩这个赌博app| www.ts38.com-安徽快三开奖公告| www.12162.com-51彩票官方下载| www.005417.com-彩票99网-| www.086321.com-广西快三综合走势图| www.198271.com-福彩今晚中奖号| www.050043.com-告别黑彩-| www.056888.cc-博通彩票app| www.438133.com-星彩网官网下载安装| www.527208.com-中福彩双色球走势图| www.614433.com-国内彩票最高奖| www.756884.com-彩66正规吗-| www.881649.com-新浪彩票走势图表| www.663674.com-博盈彩票手机版| www.739151.com-竞彩网骗局-| www.795778.com-新加坡天天彩网站| www.858247.com-彩票是个无底洞| www.907043.com-地方快三可靠吗| www.957469.com-彩宝贝财迷迷| www.997581.com-北京pk拾正规彩票| www.kj2.com-大发快三有哪些技巧| www.qv25.com-快三玩法福彩网| www.y38.com-彩票网站被黑| www.50ri.com-直播体彩开奖| www.411.cx-史上彩票最大奖| www.640116.com-足彩滴滴跟单app| www.890885.com-皇冠快三开奖结果| www.985388.com-今晚关小刀足彩推荐| www.97923.com-竞彩足球让球对阵表| www.574104.cc-自己玩黑彩算犯法吗| www.680630.com-沉迷彩票倾家荡产| www.767083.com-三d正版藏机图福彩| 大玩家彩票www.84499q.com| www.rd74.com-体彩起源-| www.15wd.com-体彩店成本-| www.138414.com-贵州省福利彩票中奖| www.279520.com-重庆时时彩龙虎公式| www.355641.com-足彩税怎么算| www.32831.cc-南城都汇汇彩园| www.057060.com-澳门十二生肖彩| www.474.tv-凤凰彩票2320| www.5282.pw-搜狗彩票基本走势图| www.04441.com-能买足彩的软件| www.568444.com-3d彩票魔鬼图| www.386726.com-50彩票平台-| www.543239.com-纽约牛彩测速网址|