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天

知道了
彩01彩票 www.596038.com-福豪彩安全不| www.751407.com-彩票聋哑人-| www.849546.com-体彩第19038期| www.970867.com-福彩3d寻马图汇总| www.xh.com-手机福彩官方下载| www.l27.net-棋牌彩票投注网站| www.3656.in-下载o38彩票| www.01089.com-开户娱乐彩金| www.469061.cc-重庆时时彩第9期| www.297917.com-七星彩今晚开奖查询| www.749456.com-中彩挣钱吗-| www.878311.com-500彩票网网址| www.954162.com-彩票助赢网页版网址| 凤凰彩票www.77801g.com| 新盈彩www.xinyc3.com| www.663.red-体彩天下江苏快3| www.802685.com-福彩字迷图迷总汇| www.875408.com-玩网络彩票一直平投| 购彩在线www.66332s.com| www.577939.com-精彩视频点观看| www.663952.com-七彩开奖结果结果| www.ij93.com-福利彩票微信公众号| www.16om.com-投福彩是什么意思| www.302161.com-北京快三电视图表| www.552322.com-福彩3d助手开奖号| www.526690.com-足球竞彩今晚欧联杯| www.622650.com-双色球福彩双色球| www.699139.com-手绘彩铅花卉| www.wt08.cc-人人中彩票打不开| www.502156.com-买500彩票犯法吗| www.646442.com-职业彩民有罪吗| www.218.me-时时彩官方计划| www.11829.cc-中国移动积分兑彩票| www.56616.cc-张家口市彩票中心| www.222259.com-彩票软件手机版| www.355873.com-足彩中多少起交税| www.452163.com-分分彩龙虎投注技巧| www.110017.com-海南体彩预测| www.57798.com-澳门博彩现金网| www.021625.com-3d彩吧图厍第5版| www.225570.com-探探好多彩票托| www.302832.com-彩票七七苹果版| www.9584.cm-106时时彩票| www.1627.pw-金蟾捕鱼注册送彩金| www.09474.com-彩29网站下载| www.73698.com-体彩排烈三数字累加| www.7482.org-彩票店摆设-| www.40052.com-淘金彩票有挂吗| www.702804.com-竞彩如何跟单更安全| www.42849.com-信誉好的竞彩| www.75021.cc-足彩预测最准的软件| www.025383.com-买彩票倾家荡产案例| www.531287.com-下载福彩3d开奖| www.789596.com-快三试机号今天| www.874196.com-彩之牙彩票查询系统| www.949212.com-排列三乐彩网| 凤凰彩票www.77802i.com| www.788917.com-古建筑彩绘图案| www.885307.com-彩票计划吧-| www.957364.com-今甘肃快三-| www.7218.net-七彩烟图片-| www.67379.com-褔彩3d之家首页| www.xg33.com-7彩彩票犯法吗| www.75sc.com-彩票软件ios下载| www.4018.vip-谁有永利彩票网址| www.051866.com-彩票app制作费用| www.64eu.com-福彩开奖全部主持人| www.2174.cm-网上买体彩大乐透| www.02194.com-兼职赚彩金-| www.69197.cc-博冠彩票app下载| www.072858.com-9b彩票值得信赖| www.54447.cc-福彩3d高手群| www.og85.com-河北快三跨走势图| www.987354.com-领完彩票大奖被杀害| www.fy58.com-英国官方时时彩| www.304499.com-福彩快三跨度图表| www.o24.net-爱彩a22-| www.71rk.com-四川恒彩建筑怎么样| www.2189.cm-下彩网下载-| www.319970.com-黑彩稳赚不赔绝招| www.010697.com-易网彩票免费预测| www.092171.com-吉林快三走势图带线| www.5094.cc-彩票软件免费挂| www.cai6782.com贵州快三开奖号码| www.019851.com-糖果彩是赌博吗| www.101409.com-立彩怎么赚钱| www.173581.com-快3彩票网-| www.kn02.com-山东快三查询| www.2lj.cc-一注彩票赚多少| www.73uj.com-欢迎注册辉煌彩票| www.2060.net-体彩3d42-| www.6781.net-彩红世界下载安装| www.796604.com-博众彩意思-| www.757378.com-体育彩票任选九规则| www.899415.com-彩神通下载-| www.977459.com-彩妆门头-| www.cai7666.com江苏快三号码开奖| www.a66.org-快三的另一种跳法| www.80un.com-福彩五分彩app| www.3764.com-全民彩票和全民智投| www.8670.org-福建体彩几点开奖| www.286836.com-武汉福彩快三转让| www.178066.com-北京福彩网首页| www.252257.com-旺彩双色球软件| www.562646.com-8g神话彩票投注网| www.730935.com-福彩店转让怎么办理| www.795971.com-132彩票网页版| www.161078.com-北京快三正文推荐| www.297268.com-37彩票平台| www.fh89.cc-高德彩合法吗| www.9354.org-彩票高官落网| www.730616.com-葡京彩票网址| www.796791.com-网上买彩票在哪买| www.863440.com-彩客网旧版-| www.910988.com-福彩三d钱王老头| www.962533.com-京东彩票网站是什么| 博亿彩票www.622by.com| www.52189.cc-彩票拖炒群技巧| www.8301.pw-上饶市福彩中心电话| www.935390.com-红牛彩票是否真实| www.275319.com-中国体育彩票网站| www.735283.com-买哪种彩票比较好| www.828623.com-彩票9官网-| www.900068.cc-彩51网网站-| www.959284.com-体彩玩法时间| www.999099.com-快三开奖计算公式| www.bh15.com-易彩娱骗局-| www.930198.com-竞彩篮球玩法规则| www.985086.com-红彩国际是骗局吗| www.kh10.com-福彩快三是不是真的| www.zc65.com-彩票长龙助手app| www.h24.me-体彩今天试机号| www.930.cc-夏侯姬和星彩| 55彩票www.755874.com| www.771319.com-互娱彩票app下载| www.135993.com-福彩12-| www.242905.com-江苏彩票一等奖| www.220090.com-快三大全平台| www.322522.com-彩票计划软件ios| www.376912.com-山东体彩兑奖时间| www.551292.com-福彩合买宣传| www.788760.com-返点最高彩票平台| www.654906.com-时时彩单式复式区别| www.779850.com-中彩易叫什么| www.833382.com-中国体彩二维码| www.970338.com-河北福彩三d字谜| www.qn88.com-体彩七星彩开奖号码| www.641346.com-体彩营业图片| www.731767.com-8k彩票哪里下| www.792098.com-那个快三软件准| www.851560.com-手机购彩365| www.kx22.cc-快三辅助免费下载| www.3qm.com-京彩怎么连接平台| www.78id.com-国外足彩平台| www.113189.com-88爱彩-| www.942174.com-96彩票app下载| 金彩www.985jc.com| www.618534.com-体育彩票终端机操作| www.689627.com-乐都彩票app下载| 彩客博www.8667p.com| www.152405.com-吉祥彩票计划软件| www.47et.com-体彩贵州-| www.86837.com-山西大清快三| www.225951.com-刷彩金单有什么危险|