JS实现普通轮播图特效

JS实现普通轮播图特效主要包含以下步骤：

利用CSS实现轮播图的基本布局，例如轮播图容器和图片容器的样式设置等。需要注意的是，轮播图容器一般为固定宽度，图片容器需要设置为横向排列并且宽度为轮播图容器的n倍（其中n为图片数量）。

.carousel {
  width: 600px; /* 容器宽度为600像素 */
  overflow: hidden; /* 超出部分隐藏 */
}

.carousel .imgContainer {
  display: flex; /* 图片容器横向排列 */
  width: 2400px; /* 图片容器宽度为600×4=2400像素 */
}

利用JS获取轮播图容器、图片容器和每张图片的宽度。同时，为了实现无缝轮播，需要在图片容器的首尾各复制一次图片，并在滚动到复制的图片时瞬间跳转到相应的原始图片上。

const carouselEl = document.querySelector('.carousel');
const imgContainerEl = document.querySelector('.imgContainer');
const imgWidth = document.querySelector('.imgContainer img').offsetWidth;
imgContainerEl.innerHTML += imgContainerEl.innerHTML; // 在首尾各复制一次图片
let currentIndex = 0; // 当前图片的索引

实现图片的无缝滚动。每次将图片容器向左滚动一个图片的宽度，并根据当前的索引值更新图片容器的left值。在滚动到复制的图片时，瞬间跳转到相应的原始图片上。

function slide() {
  currentIndex++;
  // 当滚动到复制的图片时，瞬间跳转到相应的原始图片上
  if (currentIndex === imgContainerEl.children.length - 1) {
    currentIndex = 1;
    imgContainerEl.style.left = 0;
  }
  const left = -1 * currentIndex * imgWidth + 'px';
  imgContainerEl.style.left = left;
}

setInterval(slide, 2000); // 每两秒滚动一次

实现轮播图的自动播放。在定时器中实现图片的滚动，并根据当前的索引值更新图片容器的left值，从而实现轮播图的滚动效果。

function slide() {
  currentIndex++; // 更新当前索引值
  // 当滚动到复制的最后一张图片时，瞬间跳转到相应的第一张原始图片上
  if (currentIndex === imgContainerEl.children.length - 1) {
    currentIndex = 1;
    imgContainerEl.style.left = 0;
  }
  const left = -1 * currentIndex * imgWidth + 'px';
  imgContainerEl.style.left = left;
}

let timer = setInterval(slide, 2000); // 每两秒滚动一次

// 鼠标悬停时停止自动播放
carouselEl.addEventListener('mouseenter', function() {
  clearInterval(timer);
});

// 鼠标离开时恢复自动播放
carouselEl.addEventListener('mouseleave', function() {
  timer = setInterval(slide, 2000);
});

示例1：用JS实现简单的轮播图特效

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>JS实现普通轮播图特效</title>
  <style>
    .carousel {
      width: 600px;
      overflow: hidden;
    }

    .carousel .imgContainer {
      display: flex;
      width: 2400px;
    }

    .carousel .imgContainer img {
      width: 600px;
      height: 300px;
    }
  </style>
</head>

<body>
  <div class="carousel">
    <div class="imgContainer">
      <img src="https://picsum.photos/600/300?random=1">
      <img src="https://picsum.photos/600/300?random=2">
      <img src="https://picsum.photos/600/300?random=3">
      <img src="https://picsum.photos/600/300?random=4">
    </div>
  </div>
  <script>
    const carouselEl = document.querySelector('.carousel');
    const imgContainerEl = document.querySelector('.imgContainer');
    const imgWidth = document.querySelector('.imgContainer img').offsetWidth;
    imgContainerEl.innerHTML += imgContainerEl.innerHTML;
    let currentIndex = 0;

    function slide() {
      currentIndex++;
      if (currentIndex === imgContainerEl.children.length - 1) {
        currentIndex = 1;
        imgContainerEl.style.left = 0;
      }
      const left = -1 * currentIndex * imgWidth + 'px';
      imgContainerEl.style.left = left;
    }

    let timer = setInterval(slide, 2000);

    carouselEl.addEventListener('mouseenter', function() {
      clearInterval(timer);
    });

    carouselEl.addEventListener('mouseleave', function() {
      timer = setInterval(slide, 2000);
    });
  </script>
</body>

</html>

示例2：用JS实现可控制的轮播图特效

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>JS实现普通轮播图特效</title>
  <style>
    .carousel {
      width: 600px;
      overflow: hidden;
      position: relative;
    }

    .carousel .imgContainer {
      display: flex;
      width: 2400px;
    }

    .carousel .imgContainer img {
      width: 600px;
      height: 300px;
    }

    .carousel .prev,
    .carousel .next {
      display: block;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 50px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 24px;
      color: #fff;
      background-color: rgba(0, 0, 0, 0.5);
      cursor: pointer;
    }

    .carousel .prev {
      left: 0;
    }

    .carousel .next {
      right: 0;
    }
  </style>
</head>

<body>
  <div class="carousel">
    <div class="imgContainer">
      <img src="https://picsum.photos/600/300?random=1">
      <img src="https://picsum.photos/600/300?random=2">
      <img src="https://picsum.photos/600/300?random=3">
      <img src="https://picsum.photos/600/300?random=4">
    </div>
    <span class="prev">&lt;</span>
    <span class="next">&gt;</span>
  </div>
  <script>
    const carouselEl = document.querySelector('.carousel');
    const imgContainerEl = document.querySelector('.imgContainer');
    const imgWidth = document.querySelector('.imgContainer img').offsetWidth;
    imgContainerEl.innerHTML += imgContainerEl.innerHTML;
    let currentIndex = 0;

    function slide() {
      currentIndex++;
      if (currentIndex === imgContainerEl.children.length - 1) {
        currentIndex = 1;
        imgContainerEl.style.left = 0;
      }
      const left = -1 * currentIndex * imgWidth + 'px';
      imgContainerEl.style.left = left;
    }

    let timer = setInterval(slide, 2000);

    carouselEl.addEventListener('mouseenter', function() {
      clearInterval(timer);
    });

    carouselEl.addEventListener('mouseleave', function() {
      timer = setInterval(slide, 2000);
    });

    const prevEl = document.querySelector('.prev');
    const nextEl = document.querySelector('.next');
    prevEl.addEventListener('click', function() {
      clearInterval(timer);
      currentIndex--;
      if (currentIndex === -1) {
        currentIndex = imgContainerEl.children.length - 3;
        imgContainerEl.style.left = -1 * (currentIndex + 1) * imgWidth + 'px';
      }
      const left = -1 * currentIndex * imgWidth + 'px';
      imgContainerEl.style.left = left;
      timer = setInterval(slide, 2000);
    });

    nextEl.addEventListener('click', function() {
      clearInterval(timer);
      slide();
      timer = setInterval(slide, 2000);
    });
  </script>
</body>

</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现普通轮播图特效 - Python技术站

JS实现普通轮播图特效

相关文章