animation_C透明度轮播及自动轮播

透明度轮播效果

我们先来看一下京东官网的轮播

透明度轮播它实际上是若干张图片重叠在一起的，也就是说我们在实现轮播的时候，将这些图片的位置设置为绝对定位，然后进行透明度的切换

我们来随便找4张图片来试着编写一下：

先来设置最基本的样式：

现在的运行效果如下：

我们还是看京东的轮播图，它的轮播方式有三种：

1.按prev和next按钮向左右轮播

2.按下面的白点跳转到指定的轮播图

3.当我们不点击时自动轮播

它们最终都会执行到一个函数selideTo，将切换最核心的代码放在selideTo中

而slidePrev和slideNext就是在计算prevIndex和nextIndex的值

这里需要用到上节的animation3.js封装的函数

我们具体来看一下代码：

运行效果如下：

接着，我们写一下点击小圆点轮播图片的效果：

运行结果如下：

接下来我们来看焦点怎么设定

焦点：当我们点击左右按钮切换时需要焦点切换，点击小点时要进行焦点切换，当它自动轮播时还要进行焦点切换

即焦点切换实际上和图片切换是一致的

我们要把这个动作放到selideTo中去做：

这一块我们只来看修改的部分：

中：

运行结果如下：

以上就是透明轮播的效果

最后，添加自动轮播的功能

添加两个函数，一个来进行自动轮播，另一个鼠标移入图片停止轮播

完整代码如下：

运行结果如下：

- 写作不易，大家多多关注，谢谢啦-

---web分享，分享的不只是web