js如何制作图片轮播

Posted 2023-04-21

参考技术A

工具/材料

Sublime Text

01

首先在Sublime Text下面准备一个html和5张图片，图片宽高为600px和400px，如下图所示

02

然后在HTML页面中布局轮播图的结构，如下图所示，主要包括图片区域，圆形按钮，左右箭头

03

接下来需要给轮播图页面布局声明一些样式，请按照下图所示的样式代码进行声明

04

最后就是实现轮播图的JS脚本功能，如下图所示，主要包括前进，后退，自动播放的功能

05

最后运行页面，你就会看到下图所示的轮播图效果，点击圆圈或者左右箭头可以切换轮播图

会声会影如何制作图片轮播的视频效果

当需要进行图片展示时，常常使用图片轮播的形式进行展示，这种效果很常见并且展示效果好，该怎么制作呢？接下来，小编就教大家用视频编辑软件会声会影2020制作图片轮播的视频效果。

一、 制作单张图片滚动效果

图 1：视频编辑软件导入素材

如图1，首先在视频编辑软件中导入图片素材，将五张猫咪图片添加到覆叠轨1。这里小编选择的是可爱的猫咪图片，大家也可以选择人物的图片作为素材，最后成片效果也很不错。

如图2，如果有的图片素材大小不合适，可以调整为合适的大小，尽量让五张图片素材的图片大小一致。

图 2：调整图片大小

如图三，选中第一张图片素材，单击右键选择运动下的自定义动作。

图 3：自定义动作

如图4在起始关键帧，调整X轴的数值，使得图片刚好出现在屏幕的右端。这里小编经过调整，设置起始关键帧X轴的数值为149。接着，如图5，在末尾关键帧调整X轴的数值使得图片刚好消失在屏幕的左端。设置好后点击确定回到编辑窗口。

图 4：设置起始关键帧X轴数值图 5：设置末尾关键帧X轴数值

如图6，单张图片滚动效果就设置好了，图片从右端出现到左端消失。

图 6：单张滚动效果

二、图片轮播效果

设置完单张图片滚动效果后，其余的图片也需要设置成一样的效果。这里大家不需要再重复类似的操作，只需要以下简单几步，即可设置完所有图片。

首先如图7，选中已经设置好的第一张图片素材，单击右键，点击复制属性

图 7：视频编辑软件复制属性

如图8，选中剩下4张图片素材，单击右键选择粘贴所有属性。即可将剩下4张图片素材设置为从右端出现滚动至左端消失。

图 8：视频编辑软件粘贴属性

预览效果后发现，图片与图片之间的间隔太大，为了美观，如图9大家可以点击视频轨上方的轨道管理器多添加几个覆叠轨，调整图片的位置，使得5张图片之间的间隔小一些并且一致，效果如图10。

图 9：增加覆叠轨

图 10：顺序排列图片素材

如图11，为了美观，添加提前准备好的背景图，并将背景图的结束时间点拖至与最后一张图片结束时间点一致。

图 11：添加背景图

最后预览效果，可爱猫咪图片轮播的视频效果就做好啦。

图 12：最后效果预览

以上就是介绍的视频编辑软件会声会影制作图片轮播的视频效果的方法，操作步骤也很简单，主要是学会运用素材的自定义动作这个功能，运用这个功能还能制作出其它酷炫的视频效果，想了解更多，欢迎访问会声会影中文网站。