前面分别实现了滑动轮播图和图片弹窗功能，接着我将这两个功能合并到一块，实现我前面说的功能，当我点击轮播中图片时能将图片弹出，达到放大的效果，下面是结合之后的效果图动画。
工具/原料
JavaScript
方法/步骤
1
有了前面的基础，这个功能实现并不难，首先弹出是相对于浏览器进行设定的，所以这一部分的代码完全可以移植过来使用，从新规划下结构即可，现在的HTML结构就是这样的。
2
CSS样式同样可以直接移植过来使用，我们只需要用到的这里面的一部分样式即可，直接放在原有样式下面即可。
3
接下来就是处理交互事件了，这里和之前的图片弹窗不一样的是这次是多张图片，所以这次JavaScript需要适当的修改一下了，同样先要获取当前的DOM元素，然后对轮播的图片进行遍历，在遍历中执行点击事件，这样我们就可以实现我们的轮播+弹窗效果了。
4
这里遇到一个小问题，当我将鼠标移到关闭按钮的时候，关闭按钮消失了导致无法点击关闭，后台提示Uncaught TypeError: Cannot set property 'className' of undefined，at showPage (JS滑动轮播+弹窗.html:296)，at JS滑动轮播+弹窗.html:289
5
查看对应的代码发现与之前写的showPage()方法中的span标签有点小冲突，这里把close的span标签改成其他标签就可以了（我换成了a标签），下一步我想再完善一下，弹出之后图片是全屏显示的，如果想换一张的话需要先关闭当前窗口然后在选择其他图片，这种操作还不够人性化，所以我想在弹窗中也添加两个左右键按钮，然后通过点击弹窗中的左右按钮实现图片的切换。
下一篇：赤月传说挖宝技巧与奖励分析