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.117719.com-快三第一用户登录| www.531295.com-彩93平台怎么样| www.802224.com-33372彩票登陆| www.192396.com-国民彩票app平台| www.278373.com-中彩网首业-| www.598993.com-彩客吧是什么意思| www.2118.com-创富彩票网-| www.9249.cn-万达彩票提现不了| www.0797.net-高手彩票、彩票高手| www.77233.com-彩票中奖率多少| www.981904.com-六安市福彩中心| www.bc30.com-福彩3d字谜专区| www.1hx.com-福卅福彩快3开奖| www.055147.com-彩色是不是表示颜色| www.657056.com-本期足球竞彩奖金| www.232797.com-好彩36开奖结果| www.529022.com-网上玩彩票输了钱| www.700952.com-今彩今天开票| www.860896.com-新江福彩-| www.993381.com-足彩2串1对冲| www.00ps.com-彩虹周杰伦歌词错了| www.282871.com-ios版彩票33| www.80186.com-仙彩-| www.95ju.com-福建彩票兑奖在哪里| www.105242.com-超级时时彩缩水手机| www.995594.com-竞彩串关图-| www.ru93.com-90彩票下载-| www.797688.com-福利彩票创始人| www.947809.com-玩幸运彩票靠谱不| www.ai34.com-快彩王是骗局揭秘| www.02gq.com-彩虹涂色画书蔬菜| www.790000.com-青海西宁福彩中心| www.341763.com-重庆时时彩五星在线| www.768567.com-数字新浪彩票网首页| www.cn30.cc-福彩三d字谜| www.57368.com-澳客彩票是否靠谱| www.115415.com-彩钢瓦防水-| www.627739.com-彩坛论坛网-| www.880279.com-15期喜彩开奖| www.cp198.com-快三代理-| www.982530.com-天空彩票app| www.1435.la-d大赢家彩票app| www.97177.cc-福彩三天必出计划| www.022952.com-幸运五星彩中奖规则| www.199139.com-彩票提现一倍流水| www.419479.com-体育彩票申请资格| www.646121.com-竞彩算赌博吗| www.961841.com-四川竞彩快三| www.654196.com-高仿热敏彩票机| www.cai6044.com河北省快三结果| www.47jd.com-新浪足彩周六擂台| www.1240.vip-七星彩奖虫怎样打印| www.158900.com-体彩玲独胆专家| www.9257.biz-陕西福彩提现不到账| www.39so.com-福彩快3的团队不| www.9527.net-彩漂天下-| www.295234.com-湖北快三投注| www.757210.com-二手工地彩钢围挡| www.950489.com-必中彩票软件网| www.zv53.com-彩虹6号围攻多少钱| www.51372.com-体彩app排名| www.188702.com-快三屠龙最长多少期| www.397094.com-福彩双色球篮球预测| www.228572.com-彩钢板围挡价格| www.24060.cc-中彩时时彩娱乐软件| www.980758.com-武汉彩票店转让| www.162058.com-天天福彩彩-| www.7394.win-上海最大的竞彩店| www.939966.com-彩吧图谜第二版| www.18zi.com-体彩足彩投注上限| www.55809.com-七乐彩2胆11拖| www.899903.com-福利彩票投注站申请| www.984542.com-8彩app下载-| www.uf58.com-福利彩票中奖交税| www.15554.cc-鸡公七星彩开奖结果| www.367123.com-中国彩吧3d开机号| www.775869.com-91彩票计划网站| www.849060.com-时时彩怎样杀一码| www.899283.com-83彩票网站-| www.964830.com-浙冮体彩-| 彩天下www.196049.com| www.jl55.cc-博彩充值漏洞| www.f95.net-游客美国彩票| www.29ki.com-彩票中奖最多多少| www.009.red-彩运彩票网-| www.969553.com-精彩音乐汇最新歌单| www.vu32.com-神圣彩票网站| www.199087.com-广西快三技巧公式| www.690500.com-668彩票账号登陆| www.890604.com-彩票全网最高倍| www.083972.com-安微快彩怎么下载| www.457320.com-彩票诗句最准| www.650739.com-十字彩是个什么东西| www.789379.com-皇冠竞彩对冲软件| www.957881.com-195彩票-| www.a16.top-中华彩票网下载| www.775434.com-香港好彩票-| www.910833.com-三d玩彩老头预测| 500彩票www.330672.com| www.12ip.com-无彩色系的颜色| www.4861.net-梦到彩票店-| www.71476.com-跟着群里买彩票| www.636353.com-彩虹糖小豆机分解图| www.050400.com-玩黑彩赔钱了| www.9131.online七乐彩开奖结果最新| www.010118.com-体彩手机在线可靠吗| www.150610.com-微彩站官网下载安装| www.374903.com-今期七星彩开什么码| www.529566.com-快手可以直播彩票么| www.681407.com-怎样玩高频彩| www.851909.com-竞彩258合法吗| www.957665.com-七星彩三定位包码| www.fh44.com-彩乐乐彩票网电脑版| www.4ye.cc-福彩主任冯亚平电话| www.719272.com-形容彩虹-| www.72961.com-黑龙江好彩快三查询| www.88405.com-意大利彩票90选6| www.243656.com-山东福彩手机在线| www.382872.com-买彩票赊账案例| www.598296.com-体肓彩排列5| www.732592.com-汇彩阁聚彩阁出租| www.858141.com-国家开始整治彩票| www.08tv.com-超级七星彩下载安装| www.0244.org-彩票餐馆-| www.949384.com-彩75彩票平台| 七星乐www.535666e.com| www.587150.com-体彩7星走势图| www.402666.com-福彩3d魔鬼杀阵图| www.382365.com-足球彩票运气| www.3103.cm-5+2彩票-| www.261910.com-体彩大乐透网上买| www.61tg.com-彩31官方-| www.2318.biz-彩票计划师培训| www.9956.com-今日彩票开奖吗| www.39038.com-2017117彩票| www.1356.cn-注册福利彩票多少钱| www.7011.me-3d彩票骗局-| www.30230.cc-揭秘彩之云骗局| www.713551.com-彩票是几位数字| www.76488.cc-只选3个号码的彩票| www.089670.com-彩票套利是怎么套的| www.229159.com-广东好彩1开奖号码| www.311986.com-红旗彩票快3| www.379508.com-彩鑫争霸-| www.33341.cc-福利彩票一注多少钱| www.5913.me-铜陵体彩中心地址| www.062385.com-天天乐彩票-| www.761126.com-好彩3投注宝典| www.940080.com-休彩大乐透开奖结果| www.0442.cn-凤凰彩票带你飞| www.3662.cc-933彩票骗人| www.835565.com-彩名堂旧版本下载| www.og25.com-全部彩票平台| www.40692.com-中彩是什么软件| www.638349.com-上海体育彩票申请| 500彩票www.66621q.com| www.305897.com-彩6在哪个平台| www.80555.com-网上足彩骗局| www.809839.com-会员登录9b彩票| www.874021.com-大发快三和值技巧| www.969343.com-梅州体彩兑奖中心| 500彩票www.904857.com| www.886910.com-高频彩造假吗| www.14qo.com-易彩乐快三看走势|