轮播图实现

HTML结构:

• 有一个类名为.carousel的元素，代表轮播图的容器。

• 有一个类名为.indicator的元素，其内部包含多个span元素，用作轮播图的指示器（即小圆点或下标）。

• .lunbo-box是包含整个轮播图（包括指示器）的容器。

JavaScript功能：

• 通过document.querySelector和document.querySelectorAll选择轮播图容器、指示器元素。

• 定义了currentIndex变量来跟踪当前显示的轮播图索引，intervalTime变量设置自动播放的间隔时间，totalItems变量设置轮播图的总数。

• moveTo函数负责将轮播图移动到指定的索引位置，并更新指示器的显示状态。它通过修改.carousel元素的transform属性来实现水平位移，同时移除当前指示器的.active类并给新的指示器添加.active类。

• 使用setInterval设置自动播放功能，每隔intervalTime毫秒调用一次moveTo函数，使轮播图自动切换到下一个模块。

• 为每个指示器元素添加onclick事件监听器，允许用户通过点击指示器来手动切换到对应的轮播图。

• 为轮播图容器.lunbo-box添加mouseenter和mouseleave事件监听器，实现鼠标悬停时停止自动播放，鼠标离开时重新开始自动播放的功能。

html:

<div class="lunbo-box">
          <div class="carousel">
              <div class="carousel-item">
                <a href="">
                  <img src="image/1.jpg" alt="" style="width: 400px; height: 250px;">
                </a> 
              </div>
              <div class="carousel-item">
                <a href="">
                  <img src="image/2.jpg" alt="" style="width: 400px; height: 250px;">
                </a> 
              </div>
              <div class="carousel-item">
                <a href="">
                  <img src="image/3.jpg" alt="" style="width: 400px; height: 250px;">
                </a> 
              </div>
          </div>
          <div class="indicator">
            <span class="active"></span>
            <span></span>
            <span></span>
          </div>
        </div>
        <script src="js/lunbo.js"></script>

css:

.lunbo-box {
  width: 400px;
  height: 250px;
  float: left;
  position: relative;
  background-color: pink;
  margin: 20px 0 0 15px;
  overflow: hidden;
}
.carousel {
  width: 100%;
  height: 100%;
  display: flex;
  transition: 0.5s;
}
.carousel-item {
  width: 100%;
}
.carousel-item a {
  display: block;
  width: 100%;
  height: 100%;
}
.indicator {
  position: absolute;
  bottom: 10px;
  display: flex;
  left: 50%;
  transform: translateX(-50%);
}
.indicator span {
  width: 10px;
  height: 10px;
  border: 2px solid #ccc;
  border-radius: 50%;
  margin: 0 3px;
}
.indicator span.active {
  background-color: #fff;
  border-color: #fff;
}

js:

var carousellist = document.querySelector(".carousel");
var indicators = document.querySelectorAll(".indicator span");
var currentIndex = 0;//初始化图片位置
const intervalTime = 3000;
const totalItems = 3;
moveTo(currentIndex);

var autoPlay = setInterval(function () {
  currentIndex = (currentIndex + 1) % totalItems;
  moveTo(currentIndex);
}, intervalTime);

/**
 * 移动到轮播图的第几个模块
 * @param {Number} index 板块的索引
 */
function moveTo(index) {
  carousellist.style.transform = `translateX(-${index}00%)`;
  //去除当前的指示器
  var active = document.querySelector(".indicator span.active");
  active.classList.remove("active");
  //加上指示器效果
  indicators[index].classList.add("active");
}
//检测span点击
indicators.forEach(function (item, i) {
  item.onclick = function () {
    moveTo(i);
  };
});
//鼠标上去停止
var carouselContainer = document.querySelector(".lunbo-box");
carouselContainer.addEventListener("mouseenter", function () {
  clearInterval(autoPlay);
});
//重新启动
carouselContainer.addEventListener("mouseleave", function () {
  autoPlay = setInterval(function () {
    currentIndex = (currentIndex + 1) % totalItems;
    moveTo(currentIndex);
  }, intervalTime);
});