带视觉差效果的超酷js轮播图插件

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > 带视觉差效果的超酷js轮播图插件
带视觉差效果的超酷js轮播图插件
分享:

    插件介绍

    这是一款带视觉差效果的超酷js轮播图插件。该轮播图通过js代码将多重图片合成为canvas元素,在图片移动时产生炫酷的视觉差效果。

    浏览器兼容性

    浏览器兼容性
    时间:2019-04-30
    阅读:
简要教程

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