最近太忙了,自动来到rjxy后,不晓得怎么回事,忙的都没时间更博了。
昨天还有个同学跟我说,你好久没更新博客了。。
甚为惭愧~~
正好12月来了,今天开一篇。
最近上课讲到了 SVG,不晓得同学们理解到没。 -_-!!!
图片轮播见的太多,今天就用 SVG 写了一个图片轮播,效果如下。
![2a242cfcdfe77a35f02d67a04bdd97ad.gif](https://img-blog.csdnimg.cn/img_convert/2a242cfcdfe77a35f02d67a04bdd97ad.gif)
效果要求
点击控制块,图片切换。切换的时候使用圆形做遮罩,由小到大变化。每次切换的时候,圆的位置随机产生。
主要知识点
1. SVG 的裁切(遮罩),clip-path 的运用。
2. SVG 利用 JS 更改层级。因为 SVG 不支持 CSS 的 z-index 更改层级,它永远只会让后面的标签盖住前面的标签。
所以,我就利用 JS 的 appendChild 方法,让每次展示的图片,都移动位置到 SVG 的最后---- 话说我真是聪明。
// 更改当前图片的层级为最顶层,也就是放到 SVG 的最后,它会覆盖前面的图片。
bannerSvg.appendChild( pic[ind