动态面板轮播效果

动态面板轮播效果
第一步
先来看一下我们要做的效果图

点击上面小图会有一个放大效果，然后就是我们熟悉的轮播图效果。
首先我们要做的这个小图，有好多张并且排列整齐，这样的图我们可以用到里面的原件，中继器来完成这种效果，不用一张一张的完成，只需设置中继器中的效果图，然后在设置排列，格式，样式。
第二步
要把所有图片和文字设置上去



把图片和文字分别搞定上去
第三步
鼠标移入到每个小图片时 会有放大的效果。
这个就要把中继器装换为动态面板
设置尺寸，鼠标移入移出效果。
第四步
轮播下面的小圆点，点击后有左右滑动效果，注意：小圆点要标注数字名
第一个圆点设置默认选中状态，设置选中样式，给每个小圆点都设置。

设置滑动样式
然后复制到每一个圆点上面去
圆点的选中样式也要添加上去，这个就要设置整个面板的状态改变时设置默认选中

第五步
鼠标移入图片中时显示左右两边的按钮。
因为我们设置小图片时也设置了鼠标移入事件，显然在设置就会出现冲突，我们就设置一个指针接触的事件，用一个大小和面板差不多的矩形，置于面板底层，设置页面鼠标移动时触发


未接触时就是隐藏状态，接触时就显示。
第六步
然后就是设置两个按钮的左右滑动
这个面板状态需要判断它。
要判断为状态1时在右滑动的话 就为状态3，给了这个判断在设置面板的点击状态点击之后向上一张图片滑动

把两个按钮都设置完成后整个轮播就完成了。

本文地址：https://blog.csdn.net/weixin_49983815/article/details/110673031