久久资源网

html5带视差的轮播图片代码

html5带视差的轮播图片代码

2019-05-06 10:33:55 HTML5实例

售价:5.00积分 会员免费

特别声明:资源售价只是赞助,不代表代码或者素材本身点数。收取费用仅维持本站的日常运营所需!

html5带视差的轮播图片代码

这是一款带视差效果的酷炫html5图片轮播插件。该轮播图片通过canvas元素合成多重图片叠加效果,在图片轮播滚动时产生炫酷的视觉差效果。

使用方法

1、head引入css文件

<link rel="stylesheet" href="css/style.css">

2、body引入HTML代码

<p id="loading">loading...</p>
<div id="images">
  <div class="lighten">
	<img src="img/lighten1.jpg" alt="" />
	<img src="img/lighten2.jpg" alt="" />
	<img src="img/lighten3.jpg" alt="" />
	<img src="img/lighten4.jpg" alt="" />
  </div>
  <div class="normal">
	<img src="img/normal1.jpg" alt="" />
	<img src="img/normal2.jpg" alt="" />
	<img src="img/normal3.jpg" alt="" />
	<img src="img/normal4.jpg" alt="" />
  </div>
  <nav>
	<ul>
	  <li class="pre"></li>
	  <li class="next"></li>
	</ul>
  </nav>
</div>

<script  src="js/index.js"></script>

资源出处:https://www.moyublog.com/codes/7015.html

关注微信