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.597530.com-必发彩票软件app| www.739282.com-春秋彩票开户| www.934823.com-彩73app-| www.999371.com-足彩86-| www.ka31.com-快三和值中奖多少钱| www.5jm.cc-福彩3d丽人杀码| www.86ll.com-联盟好彩乐4今天| www.3968.win-大富彩票网平台下载| www.9870.vip-培乐多彩泥-| www.003594.com-开彩票店自己买彩票| www.098974.com-五百彩票大小单对| www.190650.com-三分三块彩票合法吗| www.298290.com-购彩吧688345| www.549886.com-香港六给彩免费资料| www.669590.com-一支黑一支彩| www.764598.com-玩彩app兼职| www.853991.com-彩票103安卓版| www.933601.com-东彩娱乐平台可靠吗| 网易彩票www.092wy.com| www.gv07.com-彩票刮刮乐透视工具| www.j04.cn-手机棋牌游戏送彩金| www.57dt.com-中国福彩加盟费多少| www.1417.xyz-酷彩app官方下载| www.13563.com-体彩竞彩足球靠谱不| www.66454.com-六彩彩票-| www.053218.com-搜狗彩票走势大全| www.151540.com-3d字谜多彩网| www.254975.com-时时彩漏洞日赚千元| www.346822.com-七星彩私彩算违法吗| www.450049.com-198彩票平台注册| www.542168.com-彩绳怎么编头发一起| www.654483.com-福彩每年销售额| www.746179.com-8亿彩网下载| www.835226.com-欧盟铁盒好彩| www.919708.com-河北燕赵福彩网快3| www.978239.com-彩钢扣板厂家| www.cp612.com-福利快三官网下载| www.pj14.cc-幸运五星彩票是啥| www.12yd.com-老套子彩票快3| www.93be.com-金帝彩票正规吗| www.3883.vip-竞彩分析app| www.00202.com-下载好彩票-| www.82552.com-彩票专业走势| www.048174.com-福彩3d陈华独胆| www.155134.com-送彩金打鱼下分| www.254841.com-新浪爱彩时时彩| www.337741.com-青海福彩微信公众号| www.437944.com-湖南体育彩票网站| www.543350.com-中国金手指体彩报| www.659455.com-利彩一我的账户| www.731354.com-易彩堂app苹果版| www.802083.com-南京快三最大遗漏| www.884445.com-彩票五行生克杀尾法| www.963706.com-好彩客网客户端下载| www.cai0211.com安徽快三走势图| www.nf12.com-彩吧app在哪里下| www.03fm.cc-彩票k线视频| www.81nl.com-数字三彩神通官网| www.2595.xyz-体育彩票计算| www.8963.wang-众彩网程远杀号定胆| www.69741.com-会员登陆彩票| www.042233.com-广东福彩网官方网站| www.136434.com-开户送彩金的网站| www.225030.com-中国五分彩是骗局吗| www.308518.com-台湾乐和彩开奖| www.386206.com-牛材网彩票资讯| www.551219.com-新浪彩票购彩大厅| www.681690.com-体育彩票七个全中| www.756247.com-中彩在线玩法| www.822857.com-体彩竞彩联盟| www.886906.com-永乐彩-| www.952473.com-大奖网彩票pc| 财神网Ⅱwww.cp7836.com| www.ds38.com-时时彩刷流水方案| www.xf76.com-977彩票平台骗局| www.23xn.com-6698彩票网平台| www.0954.loan-凤彩网3d杀和尾| www.8169.cc-澳门现金博彩app| www.33266.cc-1分快3彩票合法吗| www.81033.com-福彩彩视频-| www.036915.com-足彩2串1高手技巧| www.161609.com-彩票部电话-| www.260845.com-彩票选号的奇怪方法| www.342999.com-打时时彩翻身| www.502273.com-体育彩票作假吗| www.579055.com-日本彩票哪里查询| www.659275.com-年终奖彩票中奖| www.762523.com-竞彩足球158网| www.826721.com-戒不了彩票怎么办| www.889912.com-彩票123官方下载| www.963472.com-彩铅风景画教程图解| 9928彩票www.9928i.com| www.fa57.com-福彩3d开奖解密| www.xr22.com-71彩票官网-| www.22ps.com-159彩票怎么了| www.0578.vip-玩彩老头推荐| www.7393.top-哈尔滨体彩出兑| www.25158.com-水溶性彩铅画怎么用| www.70622.com-河北福彩快3助手| www.057489.com-彩神帝购彩大厅| www.144350.com-名爵时时彩平台网址| www.238176.com-网易彩票怎么兑奖| www.623575.com-竞彩猫推荐太贵了| www.756230.com-7星彩直播开奖视频| www.8686.hk-玩彩票稳赚技术| www.025670.com-安徽快三冷号| www.114277.com-福彩快乐彩12选5| www.9019.biz-南宁广西福彩宾馆| www.008698.com-大智慧彩票app| www.095759.com-福建快三实时开奖| www.158254.com-北京福彩pk赛车| www.396405.com-彩虹六号头像| www.512384.com-水溶彩铅人物画唯美| 彩乐乐www.cll168.com| www.62qh.com-快乐彩任5奖金| www.3483.xyz-时彩网址-| www.9307.cn-七星彩各等奖中奖率| www.69683.com-财神8彩票网靠谱嘛| www.024021.com-攻击黑彩的黑客| www.084184.com-快彩11选五走字图| www.134438.com-好彩柠檬爆-| www.198326.com-青海快三哪个平台有| www.274396.com-信彩-| www.434522.com-易彩堂彩票官网| www.527258.com-新时时彩的开奖结果| www.637073.com-翼龙无人机和彩虹4| www.751214.com-博牛彩票是骗人的| www.806108.com-福彩快三帮投| www.876221.com-365约彩提现| www.127.la-彩盈手机娱乐| www.3623.cn-湖北快三豹子分布图| www.8707.com-澳彩风情开奖记录l| www.45866.com-云彩生活无纸化彩票| www.89255.cc-易旺彩票是什么意思| www.042820.com-彩票搞笑段子| www.137908.com-六福彩结果-| www.211820.com-快三数字专家预测| www.279352.com-3分时时彩开奖| www.383365.com-彩票做号技巧| www.503759.com-永安彩票兼职| www.568447.com-蓝琪儿福彩断组| www.633188.com-nba竞彩规则| www.700031.com-竞彩合买跟单靠谱吗| www.776148.com-玖玖彩票-| www.896133.com-足彩310报纸合买| www.949821.com-九州彩票平台软件| www.985406.com-足彩欧赔返还率分析| 大赢家彩票平台www.980205.com| www.if85.com-彩票中奖故事| www.yb90.com-韩国彩票网址| www.14mk.com-七星彩合数与对数| www.416.xyz-256彩票苹果| www.3572.cn-送彩金游戏论坛| www.8641.net-彩视一共有多少级| www.50998.cc-苏宁彩票可靠吗| www.89778.cc-彩票伪随机数生成器| www.038114.com-官方彩票软件app| www.135347.cc-360彩票购彩票| www.205944.com-彩票软件排行| www.268760.com-9228彩票-| www.437859.com-彩票如何领奖| www.520050.com-加微信买彩票骗局| www.602552.com-网络彩票大小单双| www.691011.com-篮球竞彩投注|