多语言展示
当前在线:1477今日阅读:155今日分享:35

JS实战006:在滑动轮播图弹窗中增加图片切换功能

前面把滑动轮播和图片弹窗完美的结合在了一起,效果还是很不错的,但是还是感觉缺了点,弹出之后图片是全屏显示的,如果想换一张的话需要先关闭当前窗口然后在选择其他图片,这种操作还不够人性化,所以我想在弹窗中也添加两个左右键按钮,然后通过点击弹窗中的左右按钮实现图片的切换,如下图的样子。
工具/原料

JavaScript

方法/步骤
1

说干咱就开始撸代码,首先我们要把样式给写出来,我在magnify中添加连个a标签,表示放大之后的箭头,同样给他们定义两个class属性,把两者相同的部分写在close_arrow中,不同的分别写在left和right中。

2

这里我把连个箭头的样式及鼠标移入时的样式写了下,本来想把箭头进入时隐藏,当我移动到旁边的时候才显示出来的,写了个#magnify:hover .close_arrow{display:block},结果发现只有移出浏览器窗口的时候箭头才会消失,这并不是我想要的效果。

3

我个人的体验来说应该是当我点击图片放大的时候,箭头是隐藏的(避免视线干扰),当我将鼠标移出图片时箭头才显示,再次移回图片上时又消失,说着说着好像这个关闭也是这么回事呀,改了。

4

这样就没法直接在CSS上完成操作了,所以这里要写个JavaScript了,给我们的图片添加个鼠标移入/移出事件,下面这样效果是不是感觉好多了。

5

实现的方法就是获取当前图片的DOM元素,然后给它设定两个两个鼠标事件,当鼠标移入图片区域时关闭和箭头都因此起来,当我移出图片时则将其显示出来。

6

显示效果解决了,接下来就是按钮的功能实现了,当我按下箭头时要不断的切换下一张图片出来,已开启我想直接调用前面写的切换按钮来着的,结果调用后发现并没有得到我想要的结果,而是在后台切换原来轮播中的图片,在放大的图中在轮播也没必要,所以我就想直接将原来的图片替换掉,这样就得到了下图的效果。

7

这里我还是抓取当前的move值,然后先判断该值让它到了最后一张就循环回来,没有则继续往后加并把当前的图片赋给我们放大窗口中的图片,这样就完美的实现了在滑动轮播图弹窗中增加图片切换功能。

8

下面是完整的代码,有兴趣的可以试试:         Picture Carousel    

注意事项
1

CSDN代码显示比较好看,有兴趣的可以走这

2

https://blog.csdn.net/kevinfan2011/article/details/86707841

推荐信息