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.1920.cn-福利彩票有哪些奖项| www.36586.com-高频彩票调整后影响| www.29lv.com-动漫彩铅画入门教程| www.6080.cn-彩票思路解析| www.260017.com-宁夏快三推荐号| www.396440.com-今天福彩什么开奖| www.661967.com-竞彩8串8能错几场| www.772871.com-恒彩彩票账号注册| www.863217.com-投诉彩票店怎么投诉| www.947329.com-开发个彩票软件| www.999586.com-福彩3d八卦图| www.ie40.com-福彩3d中奖-| www.93pm.com-我找到淘彩吧| www.7016.vip-成都三圣乡七彩田野| www.387599.com-做梦梦到彩票没中奖| www.710404.com-接彩金单-| www.850768.com-体彩有限额吗| www.38792.com-有兼职叫注册中彩网| www.006973.com-河南幸运彩号码图| www.127076.com-彩铅绘画动漫人物| www.nb89.com-彩票360购彩大厅| www.hk04.com-湖北快三一定牛跨度| www.637130.com-彩票有什么类型| www.22968.cc-中彩那天课文作者| www.688965.com-星之卡比三重彩攻略| www.792678.com-阜阳彩票中心电话| www.870534.com-人人买彩票怎么提现| www.974140.com-黑鸟每天快三秒| 天天乐彩票www.915196.com| www.597725.com-体育彩票申请电话| www.27559.cc-湖北快三网络版| www.1662.vip-红彩会登录账号| www.14115.com-乐米彩票官网平台| www.83690.com-中彩票星座-| www.080309.com-体彩有什么玩法| www.1qa.cc-河南体彩兑奖流程| www.311342.com-惠民彩票首页| www.436698.com-网易彩票网官网下载| www.552009.com-福利彩票周六开什么| www.699070.com-体彩主任自己领奖| www.782697.com-爱彩乐彩票网电脑版| www.854810.com-彩运快三靠谱吗| www.928994.com-天马彩票是不是骗局| www.983662.com-快三最晚是几点钟| www.ju4.com-河南快三历史开奖| www.nu16.com-三分快三计划软件| www.660843.com-陕西十一选五彩票| www.767279.com-时时彩倍投方案表| www.848916.com-体育彩票吧百度贴吧| www.912901.com-新浪体彩直播| www.970532.com-攻破彩票-| 500彩票www.630477.com| www.ku92.com-上海彩票网站| www.015609.com-彩票代理违法么| www.111600.com-大乐透3亿彩票照片| www.24180.com-福彩中心未来前景| www.88728.cc-手机彩票888| www.113480.com-腾讯体育怎么买彩票| www.796802.com-台湾快三-| 大赢家彩票平台www.187380.com| www.2740.win-国外的足彩-| www.129430.com-彩运来官网注册| www.077898.com-七星彩画规软件| www.203318.com-彩神ⅴ-| www.728782.com-大连体彩大乐透| www.797748.com-中国福利彩票创始人| www.868600.com-七星彩和直走势图| www.927920.com-福利彩票都有几种| www.977305.com-吉利彩票登陆| www.cp8698.com-人人彩票网-| www.qx08.com-分分彩五星必出一码| www.20rk.com-体彩3月16日开奖| www.87cu.com-淘宝为什么不买彩票| www.715839.com-k8彩票官方网站| www.515748.com-赢彩赢每日资讯| www.628916.com-掌信彩app下载| www.4603.cm-广西体彩中心网站| www.17202.com-博通福彩3d推荐| www.072090.com-彩票店主吃票怎么判| www.cai1800.com宁夏快三今日走势图| www.mu72.com-中彩双色下载与安装| www.2149.win-全民乐彩票网站| www.8647.vip-4d彩票开奖结果| www.09982.com-齐鲁彩票3d-| www.768603.com-今日竞彩专家推荐号| www.868125.com-周三开奖彩票| www.ai07.com-七星彩预测最准号码| www.xe56.com-澳门快5彩票| www.27fx.com-585彩票-| www.96dv.com-网上赌时时彩违法么| www.2528.biz-天猫彩妆品牌| www.8522.space-时时彩公式软件安卓| www.45022.com-彩38网站靠谱吗| www.369694.com-www.彩八com| www.xl88.cc-福建福彩东方6十1| www.1711.online快三开最快开奖| www.13126.cc-最大的网络彩票平台| www.86551.cc-红旗团队时时彩计划| www.150072.com-甘肃快三开奖规则| www.285829.com-深圳凤凰彩票| www.939765.com-彩票中奖窍门| www.jn78.com-五亿彩票网安全吗| www.959590.com-vr彩票漏洞-| www.122714.com-大发快三怎样作弊| www.217591.com-3d彩神吧-| www.311058.com-体彩走势图31| www.397185.com-福利彩票双色球计算| www.853349.com-彩票之家资枓大全| www.376367.com-海南七星彩规律图规| www.550778.com-全民中彩票客户端| www.652324.com-民勤谁中彩票| www.807332.com-山东彩票开奖查询| www.874645.com-最安全的私彩平台| www.936207.com-5星彩票app-| www.982134.com-三d彩票开奖结果| www.ft09.com-百盈快三选号技巧| www.597038.com-运盛彩票网行大运| www.5788.com-双数开彩打一数字| www.08293.com-附近体彩站-| www.854439.com-中国体彩网开奖视频| www.312156.com-下载彩票分析软件| www.492345.cc-刷福彩流水单| www.547818.com-易彩网邀请码是多少| www.667776.com-财富彩票网网址| www.746260.com-网络购彩骗局| www.805668.com-买彩票是什么行业| www.869015.com-七星彩500走势图| www.cp2995.com-私彩能控制官方开奖| www.173575.com-福彩3d开奖-| www.7619.biz-一张彩票多大| www.29525.com-酷彩彩票官网| www.933232.com-宝马彩票手机登录| 财神网Ⅱwww.cp7836.com| www.qg34.com-苹果八亿彩app| www.n27.com-艾彩登录-| www.41ze.com-胜负彩复式表| www.310.black-卖足彩提成-| www.787567.com-竞彩篮球怎么买| www.860088.com-5050彩票下载| www.914838.com-新浪网首页体彩| www.197984.com-福彩快三今日推荐号| www.975159.com-如何制作彩票走势图| www.dh08.com-七星彩兑奖时间规定| www.v63.com-体彩规律-| www.59vl.com-彩票上限-| www.71553.cc-正宇彩票提现| www.024343.com-博众快三软件下载| www.307282.com-七乐彩5期走式图| www.414853.com-江苏快三全天82期| www.522295.com-彩票平台名字大全| www.764387.com-彩八仙手机版ios| www.885310.com-时时彩回血上岸技巧| www.954808.com-瑞彩祥云怎么作弊| 华为彩票www.hw6689.com| www.012112.com-体彩组选六8码遗漏| www.988047.com-仲彩网站-| www.cp11.com-公益福彩-| www.rw87.com-中彩网正版资料| www.0995.site-高频快彩是什么| www.8478.com-彩神帝安卓版| www.28972.com-彩票奖金额度| www.66390.com-体彩金七乐手机购| www.595692.com-鑫彩争霸app| www.ld94.com-中彩彩票αpp|