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天

知道了
时时彩一天赚2000技巧 www.93992.cc-快三最容易出的号码| www.117716.com-快乐彩票官网下载| www.207658.com-彩票快三预测软件| www.290361.com-通辽体彩中心电话| www.502596.com-在武汉哪里买彩票| www.569904.com-福彩3d字谜推荐号| www.639884.com-横沥镇东方亮彩招聘| www.802512.com-体彩游泳夺金481| www.884753.com-下载亿彩堂-| www.994342.com-彩票网站大全排行榜| www.nn8.cc-河南快三万能三码| www.sa53.com-福彩三的170彩票| www.15ix.com-腾讯75秒彩走势图| www.2197.win-环球彩票合法吗| www.8462.cn-彩站下载-| www.51333.com-聚鑫彩票骗局揭秘| www.000275.com-山东专业玩彩| www.073246.com-爱彩乐上海选三| www.146955.com-快三三军翻倍网站| www.276831.com-青海快三中奖规则| www.369943.com-体育彩票五位数开奖| www.476100.com-彩票2元h-| www.562002.com-谁有鸿彩新地址| www.637166.com-小米彩虹电池电量| www.762722.com-易彩登录网址| www.858166.com-bb3d彩票3分钟| www.926757.com-达人彩票靠谱吗| www.984563.com-亚博彩票真假问题| www.ln14.com-中彩网如何买彩票| www.n92.cc-五分彩诀窍-| www.50gl.com-3d福星福彩推荐号| www.931.hk-7星彩北京大奖| www.5595.pw-彩票到家店主版| www.11816.com-体彩大乐透透走势图| www.56586.com-天下彩免费资料彩| www.062263.com-澳克彩票网电脑版| www.145944.com-816cc彩票-| www.235068.com-中彩那天课-| www.313109.com-彩神邀请码怎么生成| www.388371.com-信飞彩票平台下载| www.535936.com-彩票对几位数是中奖| www.621380.com-辽宁11爱乐彩| www.692758.com-彩票推广语-| www.777010.com-快八彩票下载| www.879594.com-彩票代理怎么拉客户| www.961570.com-彩票五行属于什么| 500万彩票www.www.98528f.com| www.hw64.com-福彩快三怎样做代理| www.zn44.com-彩票攻略大全集| www.28xw.com-搜狐福利彩票预测| www.0550.vip-福彩3d一句定三句| www.7128.com-104彩票下载| www.22905.com-福彩彩吧图库第三版| www.67976.com-聊彩大厅怎么下载| www.044125.com-王牌彩票网官方端口| www.130461.com-彩票逗人中奖图片| www.209558.com-体彩排列五试机号| www.282002.com-台湾时时彩的骗局| www.385220.com-七星彩免费专家预测| www.506035.com-u9彩票是真的吗| www.580581.com-最新彩票弃奖| www.656262.com-众发彩票合法| www.765567.com-彩75彩票输了| www.855556.cc-福彩奖金计算器| www.919242.com-时时彩平台搭建开发| www.983575.com-广东福利彩票领奖处| www.gy94.com-盈彩合法吗-| www.yf79.com-2005年的七星彩| www.21dw.com-彩票接口商是啥东西| www.568.com-时时彩龙虎怎么分| www.4236.biz-三彩夏装新款连衣裙| www.9555.cc-彩家园平台-| www.61155.com-新加坡福利彩票官网| www.067735.com-如何制作彩票平台| www.134319.com-广州去哪买绿好彩烟| www.208446.com-广西彩票-| www.276188.com-请放湖北快三牛| www.390798.com-注册彩金时时彩| www.511040.com-刘畊宏彩虹天堂下载| www.580789.com-彩票平台源码哪家好| www.653538.com-最新体育彩票大奖| www.759210.com-冬马来彩-| www.839337.com-足彩解读-| www.902398.com-正常彩票站有黑彩吗| www.967073.com-买三d彩票的技巧| 手机购彩www.591799.com| www.hw28.com-体育彩票管理中心| www.xz20.com-武汉福彩快三| www.18yn.com-大咖荐彩下载| www.767.org-时时彩开奖软件破解| www.4520.org-体彩19034预测| www.9789.wang-彩吧助手安卓版下载| www.60354.com-直击黑彩福彩网站| www.018381.com-开奖快的彩票软件| www.086808.com-乐福彩票怎么样| www.144860.com-360福彩-| www.247117.com-玩彩票怎么才能赚钱| www.316555.com-江苏快三有什么口诀| www.383383.com-自制选号彩票app| www.518820.com-投彩网97000| www.582616.com-四场进球彩开奖结果| www.653558.com-玖亿彩票是真是假| www.753051.com-彩经网3d走势图大| www.817960.com-500万彩票网足彩| www.886553.com-大大彩票app| www.974917.com-sd彩票-| www.vy.com-手机购彩-| www.lr20.com-三d彩票走势图| www.b91.club-678cc赢彩彩票| www.26kz.com-彩票选号计算器| www.773.in-休彩6十1开奖号码| www.4265.biz-好彩包赢网-| www.9306.vip-七星彩六等奖中奖率| www.54861.cc-明版彩票资料大全| www.93969.com-竞彩米来了-| www.045355.com-彩神通app哪里下| www.137241.com-动画彩虹冰激凌| www.208351.com-河北11选五派彩网| www.270244.com-宫网567cc彩票| www.365490.cc-众彩网3d专家叶子| www.447100.com-吉林彩票初几上班| www.527837.com-1上海快三开奖结果| www.618930.com-刮刮彩透视-| www.682710.com-微信卖彩票封号| www.750570.com-中彩在线买彩票| www.811626.com-新浪竞技足球彩票网| www.878308.com-百盛彩票能信吗| www.977309.com-河南南阳彩礼是多少| www.cai39.cc-快3彩票官网| www.hr10.com-好彩客彩票-| www.xb50.com-七星彩1到9的对数| www.10fs.com-体育彩票五位数开奖| www.69ey.com-乐彩vip靠谱吗| www.0347.cc-福利彩票店在哪里| www.8664.vip-新彩网3d字谜总会| www.35375.com-福彩作假视频曝光| www.73583.com-海南公布彩票新玩法| www.020332.com-上海彩票-| www.080205.com-赌博彩票机-| www.133333.com-彩色沥青道路建设| www.198334.com-湖北彩票开奖结果| www.257269.com-微彩站安卓客户端| www.321221.com-买大小单双彩票软件| www.379957.com-体彩购买-| www.616013.com-深圳市福彩兑奖地址| www.678265.com-重庆福彩开奖网| www.742022.com-977彩票苹果版| www.803531.com-时时彩博-| www.868477.com-01彩票官网网址| www.965901.com-中国全民快三| 幸运彩票网www.33598w.com| www.cf16.com-大发快三平台有多少| www.qj57.com-好彩2开奖结果今天| www.01us.com-六色彩虹旗什么意思| www.61cn.com-完美彩票cp828| www.763.date-荷兰五分彩官网| www.3819.bid-怎样买竞彩足球稳赚| www.8323.loan-福彩代销费怎么结算| www.22691.cc-朋友拉我玩分分彩| www.58717.cc-55125彩吧图| www.055504.com-体彩快三玩法介绍| www.123166.com-彩票计划员违法吗| www.180806.com-购彩大厅app| www.236386.com-手机购彩彩票|