Vue案例：图片动态切换效果

Posted 2023-03-14

参考技术A 这个实例的容器分为两大部分，一是左边的大图，二是右边的缩略图，效果图如下：

左边的大图会根据右边的缩略图进行左右滚动，图片的文字也会跟着发生变化，显示图片是第几张，文字也有一个效果，会先消失，然后等图片要切换完成后慢慢出现，缺点就是大图的宽是不能够自适应的，只能固定大小。

右边的缩略图会简体鼠标的滚动，跟着鼠标上下滑动，鼠标点击后图片会产生高亮还会有一个橙色的边框，左边的大图显示相应的图片，这边的缩略图的宽度是可以自适应的。