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天

知道了
5分快3 www.94vs.com-竟彩足球500比分| www.8516.cc-举报黑彩打什么电话| www.006871.com-百乐彩app-| www.098859.com-电脑彩正版藏宝图| www.185595.com-分分快三是否真的| www.274443.com-分分彩公式怎么计算| www.413288.com-有没有网上卖彩票的| www.529626.com-台湾公益彩总站开奖| www.637907.com-中国体育竞彩店转让| www.749010.com-中彩彩票黑平台| www.834823.com-好彩四宝珠-| www.903518.com-500购彩下载地址| www.968416.com-快乐彩希腊开奖结果| www.yn48.com-快三高频彩票害人| www.34qj.com-彩神通今日金码| www.0514.top-网上达人彩票| www.7801.cm-足彩双选-| www.34633.com-众彩网子墨预测| www.87224.com-快三多少钱一注| www.051393.com-500购彩下载地址| www.179629.com-湖湖北快三走势| www.269289.com-518彩票9218| www.380611.com-福彩3口走势图| www.513591.com-双色球彩票多久一期| www.592712.com-彩虹9无人机| www.676289.com-福彩多彩网字谜总汇| www.764546.com-七星彩加急版区| www.891015.com-至尊云彩票-| www.981250.com-足彩14场开奖最快| www.cz65.com-破译彩票-| www.xy08.com-d9cc彩票app| www.30le.com-色彩对比强烈的图片| www.0711.win-赛马派彩与赛果| www.7918.vip-福利彩票开奖预测| www.33879.cc-高薪聘请彩票分析师| www.83693.cc-哪个星座适合买彩票| www.050077.com-已跑路的彩票平台| www.201782.com-福彩3d组三胆拖表| www.289697.com-彩乐乐幸运选号| www.397174.com-2000万彩票交税| www.529092.com-附近的体彩销售点| www.623043.com-彩票有没有作假| www.703382.com-万博彩票代理官网| www.788952.com-竞彩足球单场推荐| www.870622.com-买彩网app-| www.977940.com-宝马彩票登录官网| www.bd1.com-新浪彩票-| www.qm45.com-诚博彩票-| www.63io.com-长春彩票-| www.0856.pw-购彩平台推荐| www.8527.cc-易彩集团软件下载| www.43420.cc-彩要开奖查询| www.91648.com-炫彩坊纹绣产品批发| www.059212.com-快2彩-| www.171161.com-广西快三预测| www.264042.com-彩票11选5技巧| www.357306.com-买彩票中奖离婚| www.454277.com-谨姝斯人若彩虹| www.552257.com-万彩吧开奖结果查询| www.663559.com-河内五分彩开奖| www.743755.com-购彩网是什么意思| www.822280.com-体彩追加-| www.897672.com-多彩贵州网招聘| www.967486.com-安徽快三是什么彩票| www.ca61.com-福彩快3下载苹果版| www.vj00.com-幸运彩票能提现吗| www.15gh.com-大富彩票网登陆网址| www.499.live-买彩票幸运数字| www.4893.vip-网上足彩在哪买| www.05130.com-国家对彩票站的政策| www.52779.cc-七彩云南普洱茶| www.97759.com-汪汪时时彩计划下载| www.069469.com-怎么下载彩神争霸| www.139183.com-天天竞彩软件| www.220040.com-体彩大乐透走势图表| www.297325.com-七星彩走势图带坐标| www.369570.com-旺旺时时彩计划软件| www.469881.com-网上买私彩-| www.560168.com-懂彩帝苹果下载软件| www.634949.com-银川星七彩-| www.832295.com-七彩影院在线下载| www.904223.com-体彩合买平台| www.970303.com-欢乐国际彩票是什么| www.go2.cc-快三的跨度是啥意思| www.pi09.com-足彩19050推荐| www.74.cc-网络彩票提现不了| www.69jv.com-手机彩票怎样不输钱| www.1211.space-什么彩票可以中上亿| www.09673.com-手机如何买3d彩票| www.53271.com-发彩网论坛-| www.96916.com-国外彩票怎么领奖| www.062476.com-59彩票app下載| www.179288.com-彩票网站诈骗套路| www.253832.com-各种釉彩大瓶价格| www.326922.com-下载快彩网-| www.398980.com-众彩网彩票| www.555493.com-七星彩中奖概率太低| www.625856.com-鑫彩娱乐平台登录| www.695783.com-竞彩m串n-| www.772431.com-菲律宾博彩推广| www.885447.com-传统体彩7位数规则| www.965607.com-福利彩票选4上海| 大赢家彩票平台www.596233.com| www.ij22.com-安徽快三出什么号码| www.zx86.com-彩乐乐22选五| www.28lf.com-3d预测乐彩网| www.0622.top-在线彩票新版| www.7084.vip-m5彩票招商代理| www.20455.com-重庆福彩开奖结果| www.62466.cc-福利彩票兼职| www.036744.com-k8彩票在线登录| www.125013.com-双色球彩托-| www.197080.com-七乐彩机选-| www.269197.com-彩票倍投砍龙| www.375644.com-体彩兑奖需要哪些| www.496401.com-沁县李彩英在武乡| www.566638.com-彩宝贝软件下载| www.636147.com-彩虹冰激凌机| www.802695.com-彩八仙人工计划安卓| www.876035.com-爱乐彩四川-| www.953641.com-一些彩票平台正规吗| www.993457.com-足彩开奖时间表| www.cp3955.com-快三破解器是真的吗| www.mg35.com-淘彩app靠谱不| www.y19.top-彩票解码揭密下| www.52ee.com-葡京彩票官网| www.759.live-牛图网3d福彩| www.4507.com-福彩计算器-| www.9515.cc-新浪彩票之今日运势| www.73700.com-体彩排列三数字累加| www.022828.com-淘彩票漏洞-| www.090126.com-体育彩票新游戏规则| www.154040.com-福彩单双大小走势图| www.267592.com-彩色混凝土-| www.353691.com-彩票直播邀请码| www.426636.com-93彩票安卓版下载| www.519631.com-cp599彩票苹果| www.585195.com-懂彩宝双色球| www.656052.com-星彩新星彩福| www.781724.com-彩票多少钱以上交税| www.861813.com-腾讯时时彩开奖依据| www.921926.com-今晚齐鲁彩票| www.977173.com-河南濮阳订婚彩礼| www.hi10.com-时时彩平台改号| www.xl04.com-鑫彩网主页-| www.10oh.com-彩钢瓦防水施工方案| www.75vd.com-竞彩新规则-| www.1014.me-福彩旗下快开彩| www.9175.shop-彩票开奖筛选软件| www.40138.cc-淘之家彩票-| www.80744.com-3d福彩号-| www.026897.com-微信彩票计划群和买| www.095776.com-购彩网站哪个最好| www.155420.com-凤凰彩票玩法说明| www.276492.com-福彩关闭时间| www.358264.com-七星彩特区空白长条| www.433554.com-彩票中奖电影有哪些| www.521736.com-中彩娱乐投资彩票| www.586015.com-何明推荐今天七乐彩| www.652055.cc-周一有什么彩票开奖| www.774477.cc-花生彩票真的假的| www.856917.com-大富豪彩票平台| www.912266.com-菲律宾干黑彩的工作| www.969626.com-什么彩票软件最好用|