鼠标滚动上下翻页效果是一种常见的网页交互设计，它使得用户可以通过鼠标滚轮的滚动来实现页面的上下翻页操作。本文作者分享了如何在Axure中制作一鼠标滚动上下翻页的效果，一起来学习一下吧。

鼠标滚动上下翻页效果是一种常见的网页交互设计，它使得用户可以通过鼠标滚轮的滚动来实现页面的上下翻页操作。这种效果通常应用于多图片、或长页面分页浏览的情况，使得用户可以方便地快速浏览内容，提高用户的交互体验。

今天作者就教大家如何在Axure中制作一鼠标滚动上下翻页的效果，我们会以鼠标滚动切换图片为案例。

一、效果展示

鼠标向上滚动时，切换查看上一张图片；

鼠标向下滚动时，切换查看下一张图片；

循环效果，如果在最后一张图片继续向下滚动，就会循环至第一张图片；如果在第一张图片继续向上滚动，就会循环值最后一张图片。

二、制作教程

1. 材料准备

这个模板我们主要用到中继器、图片元件、文本标签、矩形来制作。

1）图片的动态面板

我们先导入一张图片，导入后鼠标右键将图片转为动态面板，然后复制动态面板的状态，有几张图片就复制几个状态，在每个状态里一次打入对应的图片，这样图片的动态面板就完成了。

2）鼠标滚动的动态面板

因为我们要实现鼠标滚动的交互，一般的元件没有鼠标向上滚动和向下滚动的交互，所以我们要用动态面板来制作，只有动态面板有这个交互。

我们在动态面板里增加一个矩形，填充颜色为透明色，这样就不会遮挡与图片了。因为我们要做滚动的效果，所以动态面板里面的元件尺寸，一定要比动态面板高，这样才会出现滚动条。所以我们把矩形的尺寸设置为19998，2万是axure的极限，反正就是拉到最长，这样可以让他有足够的滚动空间。

动态面板调出滚动条，高度和图片一致，这里会默认看到滚动条，案例中的滚动条是默认隐藏的，所以我们需要用一个特殊的操作来隐藏，我们把动态面板宽拉大，直到滚动条在图片右侧，然后我们再次将动态面板转为动态面板，这样就多了一个外面板，外面板选择不显示滚动条，宽高和图片设置为一样，放在图片动态面板上方。这要就即可以有滚动效果，但是又不出现滚动条。

2. 设置交互

1）向下滚动的交互

鼠标向下滚动时，按理来说，我们只需用设置面板状态的交互，就能将图片设置到下一个页面。

但是我们在这中间遇到了问题，这样写了之后会发现，鼠标向下滚动，会有很多张图片切换，整个页面很乱。这里面的原因是因为鼠标向下滚动是一个持续值，有些人滚动一下可能持续0.1秒，有些人滚动一下可能1秒，就是没有办法一瞬间完成这个操作，导致这途中触发了多次事件。

为了解决这个问题，我们就要做一个开关来控制，我们用个隐藏的文本标签就可以了，默认值为0，如果值为0的时候，就是可以滚动切换的状态，一开始切换的时候，我们就要把开关的值设为1，然后在用设置面板状态的交互，设置到下一页，这里需要增加向上滑动的动画，动画时间可以自己设置，案例中是1秒。然后等待1秒时间，这里等待时间和动画时间应该一致。我们在把开关的值设置为0，这样就相当于重新打开开关可以继续滚动切换图片。