这是一款带视觉差效果的超酷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