这是一款带视觉差效果的超酷js轮播图插件。该轮播图通过js代码将多重图片合成为canvas元素,在图片移动时产生炫酷的视觉差效果。
使用方法
在页面中引入css和js文件。
<link rel="stylesheet" href="css/style.css">
<script src="js/index.js"></script>
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>
该带视觉差效果的超酷js轮播图插件的codepen网址为:https://codepen.io/mnmxmx/pen/vKxQbm