12-跑马灯效果js代码

图片轮播图效果js代码

(function () {
  // 轮播图的JS效果

  function startCarousel(carousel){
    // 绑定定时器
    carousel.interval = setInterval(function () {
        // 获取当前激活的指示灯
        let indicator = carousel.querySelector(".carousel-indicators>li.active");
        // 获取当前激活的图片
        let item = carousel.querySelector(".carousel-inner-item.active");
        // 取消激活
        indicator.classList.remove('active');
        item.classList.remove('active');
        // 获取需要激活的指示灯
        let nextIndicator = indicator.nextElementSibling ?? indicator.parentElement.firstElementChild;
        // 获取需要激活的图片
        let nextItem = item.nextElementSibling ?? item.parentElement.firstElementChild;
        // 激活
        nextIndicator.classList.add('active');
        nextItem.classList.add('active');

    }, 1000);
  }

  // 获取轮播图的标签元素
  let carousels = document.querySelectorAll(".carousel");
  // 给每个轮播图分别绑定事件
  carousels.forEach((carousel) => {
    // 给指示灯绑定事件
    let indicators = carousel.querySelectorAll(".carousel-indicators>li");
    indicators.forEach((indicator, index) => {
        // 绑定鼠标进入事件
      indicator.addEventListener("mouseenter", function () {
        // 清除定时器
        clearInterval(carousel.interval);
        // 把当前激活指示灯的修改为未激活
        let activeIndicator = carousel.querySelector(
          ".carousel-indicators>li.active"
        );
        activeIndicator.classList.remove("active");
        // 把自己激活
        this.classList.add("active");

        // 把当前激活图片的修改为未激活
        let activeItem = carousel.querySelector(".carousel-inner-item.active");
        activeItem.classList.remove("active");
        // 激活对应的图片
        carousel
          .querySelector(`.carousel-inner-item:nth-child(${index + 1})`)
          .classList.add("active");
      });
      // 绑定鼠标离开事件
      indicator.addEventListener('mouseleave',function(){
        startCarousel(carousel);
      });
    });


    startCarousel(carousel);

  });
})();