原来网页中的滚动图可以这么简单就做出来！！！

原来网页中的滚动图可以这么简单就做出来！！！

在今年（2018年）的中旬小编参加了成都某培训机构的前端培训，在培训的过程中发现以前所认为的网页滚动图其实可以非常容易的做出来！

1.首先你需要在自己的电脑上下载一个叫Axure的软件   下载网址链接👉Axure下载地址

2。打开Axure

3.在axure左侧有一个元件库，元件库中的基本原件中有一个叫动态面板的元件，将动态面板拖拽到中间空白面板上

4.动态面板拖拽到自己想要的尺寸后，页面右方有概要 页面的小面板，我们将鼠标移动概要 面板中的动态面板上，右边会显示一个加号，想做多少张图片滚动就添加多少State

5.接着我们需要在我们所建立的三个State上面添加需要滚动的图片，鼠标双击state1，你会发现state1里有一个和动态面板一样的方框（在动态面板里添加的state里的框架都是一样的），然后将左边元件中的图片拖到动态面板上，双击图片，打开文件夹放图片，然后按照动态面板的大小来调整图片大小

6.按照上述的方式我们添加三张图片后，我们现在所要考虑的就是如何能让这三张图片在网页载入时自己动起来，其实很简单，概要 页面的上方的功能区中，有一个叫事件的功能区，事件里有一个叫载入时的用例，我们将鼠标选中概要 页面中的动态面板，然后双击载入时 (如果没有发现载入时，点击更多事件里面查找)

7.进入载入时事件后，因为我们是让动态面板发生改变，所有在右侧选择设置面板状态，我们选择的是整个动态面板内的都要移动，所以在配置动作里面要选择动态面板，下方的选择状态中，因为我们要图片一组向下一张滚动，所以选择next，接着选择向后循环，进入动画和退出动画的样式和时间可以根据自己的喜好来设置。

8.然后按下f5或者fn+f5可在网页中查看效果，推荐使用谷歌浏览器。

这次的分享就到这里了，告辞。