猫耳FM特殊轮播图实现原理-CSDN博客

本文链接：https://blog.csdn.net/weixin_46215920/article/details/118468141

本文探讨了猫耳FM轮播图的切换效果，指出其在切换相隔多张图片时直接切换的特点。通过分析，提出了实现这种效果的算法：在切换时，移动当前图片至另一侧，目标图片至中央，同时中间图片需隐藏并移动到位。实现方法利用css3 transition和js动态调整left值，并通过调整z-index确保平滑过渡。提供了关键代码示例，鼓励读者尝试多种实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

猫耳FM轮播图模型制作

今天咱们来研究一下猫耳FM的轮播图，它的轮播效果和往常的有些不同。先来看看它的效果~

在这里插入图片描述
可以看到它的切换效果的特别之处———相隔多个图片之间的切换时，当前图片到目标图片的切换是直接切换的，没有中间图片的切换效果。

这么神奇的吗？究竟如何实现的呢？今天咱们就来好好研究一下。最终的模型效果如下（不要注意样式细节~）

在这里插入图片描述

之前做的轮播图，都是只需要把成员图片都平铺成一行，然后直接移动整一行的水平距离（如下图所示），但若如此，就会在间隔多张图片切换的时候也会展示中间图片的效果，这显然不是我们想要的。

在这里插入图片描述

看来想要实现官方的效果，就不能直接移动整个行，那咋办？需要单独操作所需移动的图片

首先要把图片独立成一个个个体
每次切换，只需移出当前展示的图片以及移入目标图片
每张图片所放的位置只可能在展示窗口的左边、右边、或中间（其中第一张图片不可能在右边，最后一张不可能在左边，想想为啥）

说明：上图左右两边图的横纵轴坐标是一样的，即1和2 、4和5应该是重叠的，我这样画是为了画图方便

按上图当前状态做移动操作举例说明

中间无间隔情况

- 展示4，则3到左边，4到中间
- 展示2，则3到左边，2到中间

中间间隔若干个情况
假设，展示5，是否直接3到左边，5到中间，4依旧不动在右边呢？尚若如此，固然本轮移动能成功实现效果。但是，当从5切换为4时，我们要的效果应该是4从窗口的左边进来才对，而如今4依旧在右边，固然不行。所以说从3到5的展示，4就必须也要移动到窗口的左边。如果直接显示4从左边移动到右边，那跟直接移动一行的效果相当。那咋办？把4隐藏起来，偷偷的移动过去。 应当如下
```
- 展示5，则3到左边，4偷偷的过左边，5到中间
- 展示1，则3到右边，2偷偷的过右边，1到中间
```

得出算法

想展示当前图片的右边图片时，把当前图片移到左边，当前图片与目标图片之间的图片偷偷的移到左边，目标元素移到中间
想展示当前图片的左边图片是，把当前图片移到右边，当前图片与目标图片之间的图片偷偷的移到右边，目标元素移到中间

方法的实现

图片的移动动画：使用css3 transition 过渡对 left属性有效，使用 js 动态改变各个图片的left值。
偷偷的移动中间图片：每次移动图片前，将当前图片与目标图片的z-index值设置为-1。

总体代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .platform {
    
      position: relative;
      margin: 50px auto 50px;
      width: 500px;
      height: 300px;
      border: 1px solid #000;
    }

    .itemList {
    
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .item {
    
      position: absolute;
      width: 100%;
      height: 100%;
      border: 1px solid #f00;
      background-size: cover;
      /*移动过渡设置*/
      transition: all 0.5s ease; 
    }


    .selector {
    
      position: absolute;
      left: 50%;
      bottom: 10px;
      transform