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.475163.com-粤海彩票网高手料1| www.632837.com-立彩骗局揭秘| www.729304.com-有多少人彩票中奖| www.877206.com-彩票客户端哪个好| www.999887.com-福彩燕赵网-| www.ev18.com-k彩平台登录密码| www.15gf.com-彩礼多还是嫁妆多| www.576.in-360足彩竞彩下载| www.5173.com-首存送彩金-| www.17701.cc-彩票信用盘-| www.62928.com-和彩宝彩票合法吗| www.026130.com-私彩平台代理| www.121809.com-陕西假宝马彩票| www.220585.com-彩票能稳赢吗| www.479402.com-竟彩足球比分直| www.2479.top-福彩三地藏机图| www.13713.cc-重庆试试彩开奖| www.65550.com-彩票模拟摇奖器下载| www.027089.com-彩色画-| www.127105.com-初学彩色铅笔画| www.228751.com-易彩快三走势图| www.304043.com-快三号码组合| www.386792.com-东方彩票的网站| www.513596.com-时时彩6注必出后二| www.793038.com-安阳彩票大奖骗局| www.645939.com-竞彩输钱压抑| www.176376.com-下载内蒙古福彩快三| www.313787.com-辛运彩票app| www.567683.com-彩宝网福彩走势图| www.704911.com-彩票快乐12-| www.xv79.com-河北体彩选五遗漏| www.qj18.com-彩运8计划网| www.53ul.com-福彩三d和值走势| www.0974.org-彩之王网址-| www.8620.vip-彩票电视频道| www.56889.cc-唐龙说彩组三点评| www.025048.com-彩富网最快报码结果| www.353528.com-陕西快乐十分爱乐彩| www.488335.com-福彩自动售票机| www.578847.com-江苏彩票店图片| www.657396.com-七星彩长条规律表| www.791411.com-排列三彩票怎么计算| www.871145.com-梦想彩票是不是骗局| www.947913.com-彩票代打兼职违法吗| www.994131.com-13彩-| www.tk4.com-江西快三推荐一定牛| www.re03.com-分分彩假吗-| www.4ll.com-一分彩票怎么玩| www.63ru.com-98彩票网app| www.842368.com-财政部彩票收入| www.924913.com-上海快三复式计算器| www.999907.cc-怪字神贴会员版福彩| www.br62.com-幸运快三投注规律| www.073919.com-金彩网是合法的吗| www.214822.com-41亿彩票-| www.169382.com-江苏快三算法| www.16145.com-中国福彩双色球查询| www.kf35.com-双色球黄小仙众彩网| www.8kw.cc-网上买足彩竞猜软件| www.79fl.com-沉迷买彩票的人| www.1815.in-34期福彩-| www.9529.net-彩票风控部门审核中| www.51326.cc-竞彩专家每天推荐| www.93379.com-丹麦28彩票技巧| www.051590.com-赢彩吧官网-| www.51531.com-时时彩平投模式| www.405.hk-福万家彩票-| www.166379.com-上海快三开奖最新| www.264865.com-靠谱的彩票投注网站| www.396007.com-彩虹mv周杰伦| www.505620.com-百彩票-| www.566878.com-彩虹六号nokk| www.052185.com-谁有彩票合买| www.ir89.com-乐乐彩票真的假的| www.37vq.com-彩票运势占卜| www.690231.com-玛雅吧彩票游戏登陆| www.812349.com-开头带彩字四字成语| www.895130.com-爱投彩票赚钱吗| www.958447.com-福利彩票公式计算除| 七星乐www.146656.com| www.27782.cc-福利彩票了3个号| www.vn77.com-福彩网上可以买吗| www.747516.com-红彩app是什么| www.837539.com-立彩助手安卓| www.922532.com-竞彩团队招聘| www.984483.com-财神8彩票网可信吗| www.ne57.com-乐优炫彩官网| www.04xx.com-生日快乐主题画彩铅| www.73ov.com-米兜彩票转型| www.0758.biz-彩票站购买数据| www.8281.pw-盈彩国际是骗人的吗| www.831973.com-彩票网上接单| www.921055.com-现在网上怎么买彩票| www.983375.com-黄直播赌博彩票平台| www.xz5.cc-甘肃快3d彩票开奖| www.pn71.com-体彩助手app下载| www.09an.com-体彩中心网站| www.89xu.com-澳门博彩走低| www.lg2.com-甘肃省快三开奖遗漏| www.727908.com-彩运网cy888| www.979861.com-体彩店贴图-| www.tp25.com-中彩乐电子走势图| www.122424.com-彩6计划群-| www.571735.com-大发彩票是正规的吗| www.636529.com-彩虹无人机大单| www.716262.com-彩铅彼岸花怎么画| www.789896.com-福彩双色球字谜| www.852878.com-国外国彩票中奖号码| www.329617.com-彩票投资指南电子版| www.418815.com-易旺彩票可靠吗| www.543249.com-体彩排列三今晚预测| www.bx87.com-双彩开奖走势图| www.21ea.com-体彩中心笔试题库| www.4871.cc-977幸运彩票| www.17283.cc-星彩代刷网app| www.737656.com-红旗彩票官网快三| www.810433.com-彩客彩票手机版下载| www.879822.com-赢彩网真的能赚钱吗| www.9295.cc-乐彩客平台是真的吗| www.718388.com-聚彩官网是合法的吗| www.78hk.com-香港可以买国外足彩| www.175917.com-快三投注平台手机版| www.038887.com-够彩大厅排列三网易| www.181129.com-旺彩-| www.310333.com-长春市体彩中心地址| www.456422.com-tt彩票平台-| www.a97.com-游戏《彩虹伞》教案| www.1829.cc-7位体彩开奖结果| www.11285.cc-烟台福彩中心网| www.180337.com-福彩红快3-| www.261889.com-新福彩3d-| www.348209.com-七乐彩幸运走势图| www.430544.com-近50期足彩星象图| www.533650.com-七星彩开什么号| www.599072.com-顶尖的体育彩票| www.670045.com-别有风彩的意思| www.785013.com-乐优彩票ios| www.848512.com-c38彩票导航| www.898246.com-今晚七星彩开什么吗| www.954778.com-彩票指点-| www.995055.com-香港五分彩走势图| www.er83.com-玩大发快三赚钱| www.ye08.com-爱彩乐中奖助手教程| www.34yk.com-彩开票开奖-| www.632775.com-第七彩资料网| www.709549.com-aa1883大发彩| www.779122.com-福彩3d定位杀号| www.834754.com-26期福彩开彩结果| www.896323.com-博彩360彩票导航| www.615900.com-彩609彩票-| www.205322.com-一分快三押大小技巧| www.765487.com-快频彩票网站| www.870866.com-金手指足彩报| www.59852.com-微彩软件-| www.796749.com-竞彩任九什么意思| www.877553.com-r8国际彩票网站| www.939333.com-北京单场足彩推荐| www.j56.club-七乐彩内部预测何明| www.93br.com-高频彩游戏棋牌平台| www.2981.com-福利彩票315| www.27391.com-七星彩说彩软件| www.76327.cc-高胜率彩票计划网站| www.028431.com-新博瑞彩票登录| www.103723.com-彩运8正规吗|