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.858785.com-吉林快三彩乐乐推荐| www.213296.com-鸿彩快三彩票网| www.472504.com-彩乐园2官方网站| www.568749.com-买彩票人物搞笑图片| www.678340.com-盛兴彩票有套路吗| www.766790.com-鸿运彩票网下载安装| www.690115.com-足球胜负彩预测软件| www.818048.com-九星彩票可以玩吗| www.903551.com-星光彩票平台| www.983705.com-大发快三模板| www.pr1.com-大发快三中奖技巧| www.018458.com-豹赢彩票真假| www.117927.com-一分时时彩开奖号码| www.214560.com-世界彩票十大巨奖| www.927351.com-网上快三客户| 中彩网www.91233k.com| www.333906.com-体彩买几位数| www.yi51.com-万能大发快三辅助器| www.480480.com-彩票3d算法公式| www.pf36.com-快三倍投稳赢技巧| www.18553.cc-幸运彩票号码选号| www.9120.vip-香港精准彩霸王| www.255750.com-彩民福地-k彩| www.567813.com-体育彩票足彩百科| www.114665.com-大发彩票手机官网| www.8322.com-福彩高频彩下载| www.73858.cc-体彩排三双双字谜| www.432838.com-微彩吧官方开奖结果| www.53261.cc-快三顺子奖金是多少| www.114695.com-3d彩吧牛彩图库| www.318499.com-重庆彩平刷-| www.177531.com-河南福彩快乐3开奖| www.265891.cc-银川体彩在哪里兑奖| www.351930.com-178彩票怎么注册| www.454622.com-福彩3d复试投注表| www.4506.vip-足彩奖金分配| www.17299.com-下载彩票开奖号码| www.479062.com-时时彩倍投什么意思| www.558335.com-奥客竞彩足球直播吧| www.654990.com-局王版七星彩| www.724479.com-男主买彩票中奖后将| www.799555.com-彩票运势姓名生日| www.3411.org-快三号码分折数据| www.654517.com-易彩怎么玩-| www.731952.com-久久彩票爱彩彩票| www.811316.com-广西快三计算方式| www.895589.com-会员登陆9b彩票| www.968893.com-刷彩票流水靠谱吗| www.cz94.com-人人竞彩彩票| www.977595.com-彩票哪个app靠谱| www.xo3.com-彩票代打兼职| www.358581.com-掘金团队彩票微信| www.664891.com-中国福利彩票售价| www.771624.com-娱乐彩票软件下载| www.852545.com-时时分分彩规律| www.915093.com-体彩开奖号彩宝网| www.976473.com-近期彩票无人领| www.181495.com-今日湖北快三走势| www.310844.com-快乐彩坐标-| www.434100.cc-义乌彩民-| www.155842.com-辉煌彩票平台| www.oj17.com-双色球预测市牛彩网| www.6091.shop-彩票计划者软件| www.qu95.com-时时彩宝典老版| www.215566.cc-全天彩票实时计划| www.108453.com-以感情名义骗彩票| www.757171.com-西宁体育彩票高频彩| www.833398.com-中国体彩网二维码| www.893211.com-足彩分析一新浪彩票| www.957852.com-彩帝彩票app| 购彩在线www.66332y.com| www.529210.com-上海彩票站转让信息| www.596546.com-云彩彩票是什么意思| www.659751.com-七星彩大数据分析| www.732906.com-236彩票-| www.796221.com-测能否中彩票| www.860943.com-好彩一开奖历史纪录| www.923673.com-开家彩票店能赚钱吗| www.974735.com-七星彩票论坛门| 环球彩票www.768656.com| www.gc10.com-天天乐彩-| www.wx83.com-内蒙古快三冷号| www.318040.com-三分时时彩在线开奖| www.212806.com-必赢彩票苹果下载| www.106817.com-瑞彩祥云破解器| www.059764.com-微信拉人玩彩票套路| www.410527.com-七彩铃铛球拼接过程| www.459548.com-彩票1516-| www.351608.com-体彩大乐透开| www.450077.com-华彩天地-| www.549998.com-足彩十四场购买技巧| www.779869.com-新世界幸运快三| www.128665.com-网易彩票五分彩| www.74099.com-福彩3d公式杀码| www.423265.com-青岛星彩-| www.572831.com-天猫彩票1000万| www.288.cc-七星彩三字定多少钱| www.5238.cn-未派彩注单什么意思| www.170237.com-河南福彩快三走势图| www.737378.com-2019彩图库彩图| www.802357.com-竞彩网让胜乎负| www.869575.com-十分钟一次的彩票| www.060607.com-海南最大的私彩老板| www.292733.com-广西体彩怎么兑奖| www.387446.com-智彩彩票走势图| www.gg01.cc-菠萝彩论坛-| www.k56.net-好彩app靠谱吗| www.696576.com-彩票008-| www.793533.com-易彩官方登陆网站| www.870815.com-彩票投注翻倍计算器| www.973596.com-彩票足球比赛腰折| www.cp746.com-快三最大的平台| www.nu63.cc-快三15和值有哪些| www.06qw.com-吉林快三不输方法| www.62nz.com-体彩大乐透真实吗| www.568241.com-彩票33提现-| www.255531.com-网络福彩代理| www.328000.com-福彩微信公众号| www.389426.com-东莞福利彩票店转让| www.868702.com-海南七星彩手机软件| www.957694.com-彩票号444-| 奔驰彩票www.509866.com| www.5421.net-四川省彩票兑奖中心| www.7vm.com-联合买彩票-| www.79za.com-乐彩网牛材网| www.911679.com-天天彩4基本走势图| www.163308.com-腾讯十分彩开奖软件| www.t49.net-中山市福利彩票转让| www.6583.xyz-彩票633.cc-| www.1987.date-慧金彩商业彩票| www.26649.com-足彩那个网可以买吗| www.69523.com-彩猫彩票正规吗| www.015763.com-南海七星彩投注网| www.071845.com-包头彩票店生意转让| www.136222.com-彩票彩经网-| www.202791.com-体育彩票查询| www.313827.com-足彩十四场比分| www.d24.com-七星彩票中奖号| 5号彩www.535hc.com| www.bg86.cc-网上五分彩可靠吗| www.1043.in-广东爱彩乐十一选五| www.478383.com-中国福彩?-| www.588714.com-今晚七星彩什么上将| www.679935.com-彩票每日首存送| www.24024.com-雅彩票-| www.0554.loan-体彩排3报纸| www.16345.com-彩客站咨询师| www.581597.com-中福彩票网-| www.690727.com-牛蛙彩票免费料大全| www.823309.com-博兴彩钢瓦厂| www.969526.com-金石团队彩票计划| www.aa70.com-体彩开奖号码今天的| www.6fx.com-分分彩购买软件| www.95fa.com-kk彩票官网-| www.021452.com-凤凰城娱乐彩票平台| www.855430.com-彩先知288元一台| www.zc73.com-红旗彩票怎么投| www.75er.com-多彩娱乐用户登录| www.2624.net-福利彩票三加零| www.617626.com-榆次福利彩票站| www.060945.com-网上买彩票犯法么| www.168646.com-湖快三走势图| www.824022.com-买彩票有发财的吗| 辉煌彩票www.2875d.com|