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.795299.com-福彩3d怎么守号| www.655195.com-台湾七星彩全年资料| www.823302.com-彩涂铝板国家标准| www.921959.com-彩神8快3苹果版| www.983973.com-海南七星彩彩版专区| www.as81.com-湖北一定牛精彩十分| www.zm99.cc-好彩堂开奖网站| www.46qw.com-体彩小终端福建| www.760886.com-时时彩每天盈利计划| www.850325.com-大奖分分彩在哪开奖| www.925933.com-500彩票预测| www.983947.com-779彩票网-| www.io9.com-快三内蒙古走势图| www.227763.com-众彩app-| www.169971.com-南昌快三走势图| www.t06.cc-河南省快三开奖查询| www.134614.com-好彩香烟绿色价格| 幸运彩票网www.33598s.com| www.616303.com-竞彩3串2几场容错| www.629018.com-全彩自动打印机| www.143377.com-梅花易数预测彩票| www.233413.com-体彩快中彩开奖| www.1045.cn-彩票亿万大奖小说| www.3682.cc-足球彩票竞彩足彩| www.22735.cc-广东体彩投诉电话| www.94132.com-体育彩票社会责任| www.318455.com-竞彩彩票官网首页| www.408844.com-大公鸡七星彩画板| www.7141.net-江苏快三怎样买大小| www.303927.com-三分时时彩技巧集锦| www.447775.com-购足彩平台-| www.967487.com-相亲网上的彩票托| www.60341.com-彩票源码系统排行榜| www.305183.com-体彩大乐透37期| www.963264.com-彩色水磨石地面价格| www.ym1.cc-如何买彩票能中奖| www.29il.com-体彩投注软件山东| www.194038.com-彩票长龙软件| www.298361.com-彩票往期开奖号码| www.30552.com-京东能买彩票| www.102458.com-k彩平台登-| www.978918.com-36选7好彩1走势| www.aj61.com-唯彩会下载-| www.573536.com-时时彩k线趋势分析| www.659884.com-2018官方分分彩| www.747409.com-趣彩cp77-| www.815291.com-福彩彩视频-| www.881334.com-幸运中彩票app| www.959572.com-九号彩票提现不了| 500万彩票www.39500c.com| www.898889.com-9亿彩票首页| www.970891.com-坚守梦见的彩票中奖| www.ef.com-中国竞彩足球计算器| www.ok99.com-福彩7等奖多少钱| www.s82.cn-海南福彩快2记录| www.45rf.com-彩票精算出来| www.981.bid-七星彩中个号有奖| www.7482.com-上海开彩票店| www.27835.cc-足彩哪种玩法简单| www.69489.com-彩店宝彩票官网入口| www.012220.com-时时彩信誉平台| www.050.in-石家庄福彩中奖| www.819721.com-vr分分彩破解| www.96308.cc-湖南亿元大奖彩票| www.87730.com-巴登五分彩是真的吗| www.259328.com-青海福彩兑奖地址| www.0553.net-幸运彩票是真钱吗| www.966964.com-手机福彩投注安全吗| www.53tl.com-大富彩票软件下载| www.6717.net-hk百彩网天下采网| www.213444.com-神彩xapp-| www.754109.com-彩票平台注册| www.841665.com-中国福利彩票5元的| www.931012.com-李永乐说彩票| www.981570.com-印尼5分彩开奖网站| www.kp1.cc-快乐十分快三助手| www.18wm.com-亿彩天虹软件下载| www.753.vip-时时彩容错做号法| www.i11.website七星彩走试图带连线| www.128716.com-福彩刮刮乐种类| www.218106.com-下载亿彩网aap| www.517222.com-体彩彩民论坛| www.633996.com-云南七彩阳光教育| www.554369.com-彩票三角码怎么组合| www.620468.com-购买国外彩票| www.680999.cc-如何戒买彩票| www.751068.com-福中彩-| www.811817.com-彩坛至尊必中九肖| www.875649.com-江苏快三怎么注册| www.954650.com-国外彩票代理| www.999316.com-快三组合投注概率| www.k77.cm-时时彩可以翻身吗| www.2049.net-手机版彩神通| www.324221.com-青岛福彩南山养老院| www.037426.com-信彩全天计划| www.644838.com-七乐彩中奖结果| www.732908.com-体彩七位数27期| www.808971.com-柬埔寨博彩-| www.910368.com-今天湖南快三| www.967712.com-怎么买彩票能中| www.22hn.com-七星彩册子彩版专区| www.278667.com-体彩p3杀码-| www.355492.com-足彩奖金扣税| www.444179.com-彩票中奖领奖| www.542896.com-彩票网站账户| www.603872.com-c彩53net-| www.668018.com-国美彩票-| www.728608.com-体彩网app安全吗| www.800579.com-福彩3d是天天开吗| www.876250.com-正规的彩票平台源码| www.948821.com-体育彩票类型图片| 汇发彩票www.hf5880.com| www.128287.com-中国体彩七星彩玩法| www.4337.top-彩票兑换流程| www.238022.com-119彩票安卓下| www.254891.com-500彩快3下载| 500彩票www.66653r.com| www.662795.com-通搏彩票-| www.606123.com-足彩网络停售| www.698322.com-桐乡福利彩票网点| www.785893.com-彩票巴巴网站| www.856236.com-百信盈福彩-| www.943348.com-和值快三计划软件| 网易彩票www.506932.com| www.mk36.com-湖北省利川市三彩| www.4121.biz-彩虹六号手游安卓版| 彩乐乐www.cll168.com| www.184069.com-河北快三玩法规则| www.290820.com-福彩3天计划论坛| www.429600.com-牛娃彩黑白图库| www.588456.com-彩票管家真实吗| www.089842.com-彩票刷流水是什么罪| www.718631.com-彩虹颜色正确顺序| www.816419.com-时时彩上岸自救| www.962648.com-银河彩票贴吧| www.px53.com-提现快的彩票app| www.226.me-彩票哪个平台能买| www.38084.com-大彩网不更新| www.967651.com-网彩被骗怎么报警| www.814599.com-19038期足彩| www.044479.com-江苏福彩6十1| www.208512.com-体彩竞猜-| www.289965.com-颖彩双色球预测本期| www.15691.cc-中国6加1彩票玩法| www.219955.com-武汉福彩快三店转让| www.412811.com-足彩特约分析师| www.506852.com-今天体彩奖号| www.1344.me-黑彩怎么做庄| www.831795.com-彩票店在线接单| www.898492.com-扫一扫彩票-| www.507536.com-955彩票苹果版| www.ao35.com-贵州省福彩兑奖地址| www.02az.com-彩虹都是七种颜色吗| www.620.tv-时时彩全天个位计划| www.3472.vip-快三爱彩乐开奖| www.536123.com-彩票位数-| www.615330.com-04彩-| www.809822.com-香港旺彩4肖8码| www.031362.com-天天购彩网怎么样| www.214401.com-秒速快三谁开的| www.dc22.com-全民快三彩票| www.811872.com-开奖公告千亿彩票| www.975252.cc-彩票人工准计划| www.75pz.cc-怎么刷彩票流水不亏|