模拟相册图片切换

需求：此篇文章的需求背景是有一条H线，H线上有4个H点，每个H点有4张图片，当点击某个H点的某张图片时，打开该弹窗，并进行切换，当前H点切换结束后根据向左或向右切换进行自动拼接前一H点或后一H点内容，自动组成下方图片列表内容

开发：开发内容是一个弹窗，此弹窗是在父级页面选中了某一相册下的某一张图片后弹出

功能：向左切换，向右切换，点击下方图片列表的图片(以下相册=H点，H点=相册)，显示或隐藏下方图片列表

功能详解：

1.多个相册可进行无缝衔接式切换，下方展示相册列表，上方显示图片时下方相册列表进行联动，下方相册列表中对应的图片展示白色边框

2.选中点击下方相册列表中的图片时上方图片随之展示当前选中的图片

3.可进行左右切换，当切换到第一张或最后一张时进行提示

4.每个相册默认4张图片，当当前相册已切换完后，下方相册列表自动拼接,当点击向左切换时下方相册列表为该相册本身与上一相册内容，同理，当点击向右切换时下方相册列表为该相册本身与下一相册内容

5.显示或隐藏下方图片列表

6.使用的都是假数据，如果大家有类似需要，可以根据自己需求进行修改切换时的坐标计算方式，图片路径记得改哦

代码：

html部分：

 js部分

css部分