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.7cw.com-吉林三地彩票| www.pp83.cc-广西体彩十一选5| www.768.me-赢彩王免费软件| www.01716.com-彩金游戏-| www.221066.com-瑞彩祥云怎么下载| www.233706.com-快三开对子的概率| www.043522.com-福彩3d怪字图| www.0308.cc-彩票站转让注意事项| www.311999.cc-体彩大乐透网上购买| www.1520.vip-安徽省彩票开奖情况| www.488528.com-新浪彩票网电脑| www.611574.com-真实的彩票网站| www.720323.com-河北快三开奖走势| www.821822.com-福利彩票无票兑奖| www.982484.com-竞彩大赢家实体店| www.618489.com-如何看体彩中奖没有| www.489109.com-国家体彩云平台| www.883371.com-359开奖网高频彩| www.358994.com-彩客网进球彩开奖| www.789058.com-河南兰考县彩礼| www.907220.com-分分快三有没有技巧| 网易彩票www.177249.com| www.482530.com-五位数的彩票有哪些| www.xi32.com-陇南福彩中心| www.982.mobi-手机彩票2元网网址| www.74690.cc-华达竞彩旗舰店| www.cai958.com-湖北福彩快三走势| www.02pg.com-体彩世界杯购买| www.123579.com-乐彩网排三排五论坛| www.755595.com-苹果彩膜图片| www.957616.com-爱彩乐彩票数据提醒| www.np47.com-彩票大小走势分析| www.jf66.com-內蒙古快三走势图| www.51.cx-天牛彩报第五版| www.670443.com-彩票趋势软件安卓版| www.777689.com-辉煌彩票官网登录| www.878153.com-被彩票平台骗局| www.948726.com-鑫彩网彩票注册官网| 大赢家彩票网www.178625.com| www.369602.com-彩民红高手水论坛| www.655045.com-快彩网靠谱吗| www.86833.com-广州鸣彩官方网站| www.311149.com-快彩在线主页| www.455501.com-乐彩平台真的假的| www.529508.com-中彩网彩票专家| www.246986.cc-福彩快三概率| www.320004.com-江苏快三跨走势图表| www.37339.cc-俄罗斯限量彩蛋| www.123089.com-酷彩吧是什么平台| www.217136.com-快三一共多少注号码| www.114867.com-星彩票app下载| www.193388.com-体彩排列3玩法| www.3111.date-乐彩七乐彩论坛| www.382112.com-彩票一天下-| www.736855.com-招商银行彩票| www.811626.com-新浪竞技足球彩票网| www.885857.com-福彩3d幸运码下载| www.951757.com-快三打和值中奖金额| www.998314.com-彩票天天乐是否正规| www.am85.cc-苏州市福利彩票中心| www.231624.com-官方彩票有哪些种类| www.306799.com-吉祥彩票聊天室| www.720680.cc-七星彩容易得奖| www.699807.com-神彩-| www.425290.com-豹子彩票-| 500彩票网www.61655h.com| www.276177.com-七乐彩计算器| www.400680.com-海南七星彩画规律表| www.30277.cc-网上买体彩合法吗| www.008299.com-七乐彩现场视频直播| www.41028.com-中彩网推荐号| www.39pk.com-菜彩票开奖-| www.54541.cc-爱投网彩票怎么样| www.635018.com-时彩能不能赚| www.62482.com-华夏彩票8官网下载| www.lq21.com-中彩网计划群| www.or08.com-必赢彩票网可靠吗| www.144718.com-中国竞彩官方| www.191695.com-809彩票-| www.027922.com-棒棒彩票计划网| www.114300.com-六开彩开奖结果走| www.731803.com-彩票守号多久能中| www.105684.com-下载八亿彩应用| www.462896.com-杏彩时时彩平台网址| www.501447.com-合乐时时彩-| www.595107.com-天津体彩官方app| www.685314.com-福彩3d大花虎1| www.969500.com-怎么当彩票计划员| www.1qh.com-玩彩票亏了怎么回本| www.302991.com-博彩展-| www.618098.com-体彩彩吧排列三预测| www.386910.com-买彩票的微信名字| www.499090.com-带你刷彩金的骗局| www.71758.com-60彩票-| www.880881.com-凤凰网彩票有退水吗| www.958802.com-今晚体彩的开奖号码| 天地彩www.44tdc.com| www.74sw.com-91彩票联盟下载| www.4089.biz-海南七星彩购买软件| www.8723.top-2001年足彩-| www.543430.com-中华体彩彩报| www.63955.com-澳洲f1赛车彩票| www.970354.com-地球人彩票网页版| www.501171.com-重庆分分彩有假吗| www.8235.loan-江西快三预测一定牛| www.712930.com-双色球彩票攻略| www.806256.com-中彩在线提现不到账| www.101.cm-大众彩票官方| www.250733.com-中彩彩票垃-| www.339626.com-盈盛彩票网-| www.497889.com-悟空彩票平台怎么样| www.015764.com-七星彩海南投注平台| www.995979.com-足彩18098任九| www.071581.com-福彩3d开机号试| www.ha17.com-3d助手彩吧-| www.117.me-彩虹的约定歌谱| www.34307.com-简单彩铅画风景| www.084609.com-天天赢彩票怎么样| www.226152.com-有中福利彩票的人吗| www.360100.com-足球彩票销量排行榜| www.638447.com-色彩图片美术作业| www.751545.com-福利彩票双手机投注| www.878720.com-彩神通时时彩手机版| www.974860.com-香开码结果开奖彩娃| www.td0.com-安徽快三稳赚技巧| www.2273.pw-老重庆时彩时彩| www.58785.cc-掌上中彩苹果版| www.994997.com-中福1分快三的网址| www.6314.xyz-大彩网址-| www.54419.com-卖彩票怎么挣钱| www.871664.com-足彩手机过滤软件| www.352467.com-彩票送礼金18网站| www.756712.com-体育彩票33期开奖| www.cai8099.com河北快三推荐号和值| www.93ra.com-福彩时刻重庆5分彩| www.356871.com-体彩福彩牌匾门脸| www.5513.cc-真实的体育彩票| www.721004.com-数学家破解彩票| www.69987.cc-盛世彩票登录网站| www.217529.com-大发快三破解器软件| www.55933.com-福彩开奖日期时间| www.833526.com-彩票开奖体彩排列三| www.917365.com-重庆福利彩票中汽车| www.982277.com-3d福彩图库-| www.cai2017.cc-宁夏快三基本走势图| www.296634.com-福彩红五布衣图| www.616930.com-九号彩票官方网站| www.686165.com-彩色混凝土做法| www.766740.com-聊城彩票代理加盟| www.838379.com-江苏快三防连挂软件| www.906920.com-极速快三稳赢技巧| www.970072.com-七彩奖下载-| www.cai3144.com爱彩乐快3-| www.kt04.com-上海福彩中心| www.650560.com-重庆十字彩合法吗| www.47888.cc-体育彩票玩法奖金| www.804019.com-泉州体彩音乐聊天室| www.953224.com-体育彩票兑奖时间| www.fw96.com-福彩公益金使用宗旨| www.509054.com-万利彩票软件| www.653888.cc-奔腾彩票是正规的吗| www.88429.cc-国外彩票巨奖| www.091228.com-百胜彩票是什么网址| www.100188.cc-87彩票app-|