js简单table切换

<style>

      li {

        list-style: none;

      }

      ul {

        display: flex;

        justify-content: space-between;

        width: 30%;

        margin: auto;

      }

      ul li {

        width: 15%;

        height: 3%;

        border: 1px solid pink;

        text-align: center;

        color: #000;

      }

      p {

        margin: auto;

      }

      p img {

        width: 30%;

        margin-left: 550px;

        transition: all 3s ease-in-out;

      }

      .active {

        background: #ff6700;

        color: #fff;

      }

      .fade-in-out {

        opacity: 0;

        animation: fadeInOut 3s infinite;

      }

      @keyframes fadeInOut {

        0% {

          opacity: 1;

        }

        50% {

          opacity: 0.5;

        }

        100% {

          opacity: 1;

        }

      }

    </style>

<div class="box">

      <ul>

        <li class="active">王昭君</li>

        <li>吕布</li>

        <li>庄周</li>

        <li>不知火舞</li>

        <li>安琪拉</li>

        <li>周瑜</li>

      </ul>

      <p><img src="./1.webp" alt="" class="fade-in-out" /></p>

 <script>

//定义数据

        let arr = [

          {

            img: "./1.webp",

            title: "王昭君",

          },

          {

            img: "./2.webp",

            title: "吕布",

          },

          { img: "./3.webp", title: "庄周" },

          { img: "./4.webp", title: "不知火舞" },

          { img: "./5.webp", title: "安琪拉" },

          { img: "./6.webp", title: "周瑜" },

        ];

//获取元素

        const list = document.querySelectorAll("ul li");

        const img = document.querySelector("p img");

//循环遍历每个小圆点

        for (let i = 0; i < list.length; i++) {

//给每个小圆点添加点击事件

          list[i].addEventListener("mouseenter", function () {

//先找到第一个带有active类名的元素，删除类名

            document.querySelector(".active").classList.remove("active");

//找到第二个元素添加类名

            document

              .querySelector(`ul li:nth-child(${i + 1})`)

              .classList.add("active");

            img.src = `${arr[i].img}`;

            img.title = `${arr[i].title}`;

            img.style.opacity = "1";

          });

        }

      </script>