js左右点击无缝轮播图

基础概念

无缝轮播图是一种网页设计中的常见效果，它允许用户在浏览一系列图片时，通过点击左右箭头实现图片的无缝切换。这种效果通常通过JavaScript来实现，结合CSS进行样式设计和动画效果。

类型

手动控制：用户通过点击按钮来切换图片。
自动播放：轮播图会自动定时切换图片。
触摸滑动：支持在移动设备上通过触摸滑动来切换图片。

应用场景

首页广告展示
产品介绍页面
新闻资讯列表
社交媒体动态

示例代码

以下是一个简单的JavaScript左右点击无缝轮播图的实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Seamless Carousel</title>
<style>
  .carousel {
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  .carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }
  .carousel-item {
    min-width: 100%;
    box-sizing: border-box;
  }
  .carousel-item img {
    width: 100%;
    display: block;
  }
  .carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
  }
  .left {
    left: 10px;
  }
  .right {
    right: 10px;
  }
</style>
</head>
<body>

<div class="carousel">
  <div class="carousel-inner" id="carouselInner">
    <div class="carousel-item"><img src="image1.jpg" alt="Image 1"></div>
    <div class="carousel-item"><img src="image2.jpg" alt="Image 2"></div>
    <div class="carousel-item"><img src="image3.jpg" alt="Image 3"></div>
  </div>
  <div class="carousel-control left" onclick="prevSlide()">&#10094;</div>
  <div class="carousel-control right" onclick="nextSlide()">&#10095;</div>
</div>

<script>
  let currentIndex = 0;
  const items = document.querySelectorAll('.carousel-item');
  const totalItems = items.length;

  function updateCarousel() {
    const offset = -currentIndex * 100;
    document.getElementById('carouselInner').style.transform = `translateX(${offset}%)`;
  }

  function nextSlide() {
    currentIndex = (currentIndex + 1) % totalItems;
    updateCarousel();
  }

  function prevSlide() {
    currentIndex = (currentIndex - 1 + totalItems) % totalItems;
    updateCarousel();
  }
</script>

</body>
</html>