带右侧缩略图的图片滚动切换特效

一款带右侧缩略图的图片滚动切换特效，鼠标滚动到第二张图片的时候，会在右侧显示有每一张图片的缩略图，此时可以点击缩略图切换大图或继续用鼠标滚动来切换，每一张图片都是全屏显示的效果。

分类：图片代码 > 缩略图难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需引入页面的CSS样式文件，代码如下：

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

页面的body部分，设置好缩略图按钮和滚动切换的大图容器，代码如下：

<div class="controls">
  <button class="slide-indicator" data-panel="1"></button>
  <button class="slide-indicator" data-panel="2"></button>
  <button class="slide-indicator" data-panel="3"></button>
  <button class="slide-indicator" data-panel="4"></button>
  <button class="slide-indicator" data-panel="5"></button>
</div>
<ul class="dm">
  <li class="dm-panel header tx--white">
    <div class="advice">
      <h1>Let's take a scroll 😊</h1>
    </div>
  </li>
  <li class="dm-panel">
    <div class="dm-panel__content">
      <h2>How about navigating through your site content a little differently?</h2>
    </div>
  </li>
  <li class="dm-panel"></li>
  <li class="dm-panel"></li>
  <li class="dm-panel">
    <div class="dm-panel__content">
      <h2>How about navigating through your site content a little differently?</h2>
    </div>
  </li>
</ul>

页面的底部，需引入必要的JS文件，代码如下：

<script type="text/javascript" src="js/index.js"></script>