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

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

在线预览    源码下载

爱编程-编程爱好者经验分享平台
版权所有 爱编程 © Copyright 2012. All Rights Reserved.
闽ICP备12017094号-3