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.q97.cc-体彩大乐透中奖公式| www.j65.xyz-武汉新湾路福利彩票| www.53fg.com-家彩网开奖查询| www.1374.cm-漫威水彩抽象画| www.115946.com-有人带你买彩票赚钱| www.214242.com-彩票店做私庄犯法吗| www.308675.com-买体育彩票中奖技巧| www.340.com-彩票测算软件| www.6493.xyz-98198彩票网彩| www.26239.com-描写彩虹的古诗| www.87584.com-体育彩票刮刮乐种类| www.060631.com-体彩87网站-| www.299181.com-彩票全能中彩官网| www.460386.com-盛世彩票漏洞| www.633030.com-体育篮球彩票| www.731572.com-188彩票网站网址| www.822382.com-香港668彩票网| www.897231.com-美国彩票十大悲剧| www.960439.com-竞彩宝app-| 红旗彩票www.39957c.com| www.84704.com-时时彩两期必中计划| www.618734.com-就红彩票-| www.949867.com-乐优彩票苹果| www.998110.com-竞彩足球可以买哪些| www.dp55.com-哪个平台玩快三好| www.4975.vip-中澳彩票靠谱吗| www.29875.com-福利彩是真的吗| www.67sn.com-号百彩票新版| www.33458.cc-彩奖k3-| www.99583.cc-分分彩都是假彩| www.116518.com-特彩吧下载-| www.058904.com-小白彩票官网| 购彩在线www.66332b.com| www.95867.com-体彩怎么加盟| www.162539.com-多彩娱乐官网| www.335333.cc-红中彩票手机版登录| www.63mu.com-彩票和九宫格的运用| www.170011.com-吉林体彩-| www.463543.com-体彩012路走势图| www.591115.com-结婚彩礼钱和嫁妆| www.697523.com-如何中七星彩| www.916583.com-黑客能修改私彩余额| www.718369.com-聚彩彩票有假的吗| www.798533.com-彩虹8app下载| www.929471.com-牛彩彩票网站| 博友彩www.646452.com| www.j60.cn-湖南省福利彩票官网| www.fp18.com-500彩票下载| www.154811.com-注册送388彩金| www.000657.com-多彩网投注可靠吗| www.144801.com-福彩3d微信交流群| www.593236.com-7彩阳光慢动作| www.678636.com-中国竞彩触屏版| www.629095.com-山东福彩七乐彩| www.762125.com-竞彩猫首页-| www.885768.com-排列三杀号家彩论坛| 名门彩www.33997m.com| www.uj90.com-彩虹代表的含义| www.408761.com-vr3分彩是真的吗| www.767073.com-乐彩双色球诗谜专区| www.838637.com-凯里福彩大奖无人领| www.910021.com-彩报3d第一版| www.971473.com-开发彩票网站违法不| www.aw7.com-浙江快三开奖结果| www.984880.com-吉林福彩网快3开奖| www.26yp.com-彩票专用书籍和技巧| www.3344.biz-k7彩票app-| www.051196.com-可以彩票合买的软件| www.141659.com-福利彩票快乐10分| www.700440.com-怎么下载快三走势图| www.34rp.com-传奇彩票靠谱吗| www.2828.net-凤凰彩票是不是真的| www.183288.com-吉林福彩-| www.298070.com-快三中奖中多少| www.395651.com-彩虹合唱团歌曲视频| www.526531.com-时时彩长期盈利技术| www.670917.com-彩色球一字夹| www.762247.com-彩票买法-| www.895968.com-瑞彩网网址-| www.975463.com-彩宝彩票网站是什么| www.ai24.com-七星彩论坛精选| www.wt51.com-快三稳赚不赔的方法| www.425016.com-乐乐彩排列三杀号| www.508768.com-彩铅画教程图解人物| www.571725.cc-时时彩绝密技巧| www.626409.com-彩彩-| www.680537.com-掌优彩票怎么样| www.741877.com-竞彩2串1的技巧| www.798815.com-测彩-| www.866149.com-玩快三大小稳赚技巧| www.915673.com-自己开提彩票| www.964952.com-赠送彩票公众号| 500彩票www.613595.com| www.450605.com-数字3彩票开奖号码| www.571382.com-体彩数字规律推算| www.710339.com-彩神争下载-| www.772514.com-福彩标识图案大全| www.830397.com-彩票查询中奖软件| www.883371.com-359开奖网高频彩| www.945356.cc-135彩票app-| www.981497.com-体彩48丨-| www.cai4033.com快三安徽开奖结果| www.239806.com-王者彩票可以挣钱吗| www.320678.com-彩神计划软件破解版| www.cp1126.com-彩票平台注册送19| www.jp12.com-河北快三形态开奖| www.03978.com-豪彩彩票注册| www.93rv.com-彩色相片的原理| www.2355.cm-七彩虹gt960| www.7187.com-七彩阳光动作分解版| www.11142.cc-福彩排列七开奖日期| www.967242.com-专业彩吧助手走势图| www.bl41.com-大乐透购彩大厅| www.i26.online-爱投彩票可靠么| www.158.bid-关于彩虹的微信名| www.3113.net-七星彩历史上的弃奖| www.8428.top-星彩代挂-| www.27172.cc-快三大小和值计算| www.62533.com-彩票网站刷流水兼职| www.1490.vip-七色彩虹寓意是什么| www.19139.com-足球彩票领奖| www.52455.cc-足球彩票下载手机版| www.432027.com-体彩贵州11-| www.509869.com-567彩票无法提现| www.562298.com-彩票刷流水团队| www.194551.com-吉林快三是啥意思| www.779361.com-信彩软件下载| www.922044.com-湖北快三贴吧| 七彩www.53900q.com| www.jj30.com-私彩网站哪个最安全| www.k23.bid-排列三众彩网| www.98li.com-黑彩套利贴吧| www.6008.pw-福彩宝石机规则| www.10444.com-云南福彩快乐十分遗| www.709832.com-亿彩安卓-| www.770382.com-彩乐汇彩票官方网站| www.930087.com-北京快三线路图| www.970766.com-买彩票能中大奖吗| 福彩www.15355o.com| www.bo63.com-机选彩票-| www.wl39.cc-中福快三开奖历史| www.48zi.com-青岛七彩云南| www.0471.live-体彩走试图-| www.8509.org-合肥竞彩店转让消息| www.73287.com-彩票微信群名称大全| www.040842.com-足彩怎么看盘| www.051644.com-星光彩票官网| www.506897.com-体彩总进球怎么玩| www.627971.com-快3开门彩-| www.657919.com-599彩票下载安装| www.81299.cc-福彩3d各种图表| www.691652.com-高频彩网站-| www.456592.com-华彩网-用户登录| www.567142.com-彩虹台直播源地址| www.kr01.com-福彩字谜太湖| www.17bt.cc-手机购买足球彩票| www.2141.cc-体彩开店利润怎么样| www.16322.cc-彩客站贴吧-| www.803123.com-003彩票-| www.982436.com-全天时时彩在线计划| www.pq12.com-彩吧网3d-| www.42988.cc-特彩4949-| www.059661.com-英国时时彩官网平台| www.211112.com-彩界联盟网址多少|