js实现轮播图

Sokachlh

已于 2023-12-29 10:22:49 修改

阅读量361

点赞数 9

文章标签： javascript 开发语言 ecmascript

于 2023-12-28 16:24:53 首次发布

本文链接：https://blog.csdn.net/weixin_46031207/article/details/135272621

版权

6666666

html:

<body>
    <div class="carousel">
        <div class="carousel-list">
            <img class="carousel-item" src="./img/01.png" alt="">
            <img class="carousel-item" src="./img/02.png" alt="" >
            <img class="carousel-item" src="./img/03.png" alt="" >
            <img class="carousel-item" src="./img/04.png" alt="" >
            <img class="carousel-item" src="./img/05.png" alt="" >
        </div>
    </div>

    <div class="prev">左<<<</div>
    <div class="next">右>>></div>

    <script src="./js/index.js"></script>
</body>

css

.carousel {
    width: 100%;
    height: 60vh;
    /* background-color: aqua; */

    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: nowrap;

    position: relative;
}

.carousel-list {
    width: 30%;
    height: 100%;
    /* background-color: red; */

    position: relative;
}

.carousel-item {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
}

.prev {
    width: 4vw;
    height: 4vw;
    border: 1px solid #ccc;
    background-color: #936464;
    position: absolute;
    top: 30%;
    left: 10%;
}

.next {
    width: 4vw;
    height: 4vw;
    border: 1px solid #ccc;
    background-color: #936464;
    position: absolute;
    top: 30%;
    right: 10%;
}

.prev:hover {
    background-color: #21e204;
    cursor: pointer;
}
.next:hover {
    background-color: #21e204;
    cursor: pointer;
}

js

const items = document.querySelectorAll(".carousel-item");
let index = 0;

function layout() {
  const xOffsetStep = 100; // 设置每个轮播图之间的间隔
  const count = items.length;
  const scaleStep = 0.6;
  for (let i = 0; i < items.length; i++) {
    const item = items[i];
    // 判断符号（左右）
    const sign = Math.sign(i - index);
    const opacityStep = 0.5;
    // 设置
    // transform
    // translateX   scale    rotateY
    // opacity
    // z-index

    let xoffset = (i - index) * xOffsetStep;

    if (i !== index) {
      xoffset = xoffset + 240 * sign;
    }
    const scale = scaleStep ** Math.abs(i - index);

    const rotateY = i === index ? 0 : 45 * sign;

    item.style.transform = `translateX(${xoffset}px) scale(${scale}) rotateY(${rotateY}deg) perspective(60vw)`;
    const opacity = opacityStep ** Math.abs(i - index);
    item.style.opacity = opacity;

    item.style.zIndex = count - Math.abs(index - i);
  }
}

layout();

const prev = document.querySelector(".prev");
const next = document.querySelector(".next");

prev.addEventListener("click", () => {
  index--;
  if (index < 0) {
    index = items.length - 1;
  }
  layout();
});

next.addEventListener("click", () => {
  index++;
  if (index > items.length - 1) {
    index = 0;
  }
  layout();
});

items.forEach((item, i) => {
  item.addEventListener("click", () => {
    index = i;
    layout();
  });
});


    setTimeout(() => {
        index++;
        if (index > items.length - 1) {
          index = 0;
        }
        layout();
      }, 3000);