基于JavaScript实现轮播图代码

下面是“基于JavaScript实现轮播图代码”的完整攻略。

第一步：HTML布局

首先，在HTML页面中创建轮播图的容器，并在容器内创建轮播图下方的指示器：

<div class="carousel-container">
  <div class="carousel-slide">
    <img src="image1.jpg" />
    <img src="image2.jpg" />
    <img src="image3.jpg" />
    <img src="image4.jpg" />
  </div>
  <div class="carousel-indicators">
    <span class="indicator active"></span>
    <span class="indicator"></span>
    <span class="indicator"></span>
    <span class="indicator"></span>
  </div>
</div>

在上述HTML代码中，.carousel-container 是整个轮播图的容器，.carousel-slide 是存放轮播图页面的容器，.carousel-indicators 是放置轮播图指示器的容器，.indicator 是每个轮播图指示器。

第二步：CSS样式

接下来，在CSS样式中设置轮播图容器和轮播图页面的样式：

.carousel-container {
  position: relative;
  overflow: hidden;
  width: 600px;
  height: 400px;
}

.carousel-slide {
  display: flex;
  width: 400%;
}

.carousel-slide img {
  width: 25%;
  height: 400px;
  object-fit: cover;
}

.carousel-indicators {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  margin: 0 5px;
  cursor: pointer;
}

.indicator.active {
  background-color: #fff;
}

在上述CSS样式代码中，我们设置了轮播图容器 .carousel-container 和轮播图页面容器 .carousel-slide 的宽度和高度。轮播图指示器容器 .carousel-indicators 是绝对定位，而每个指示器 .indicator 设置了默认状态和选中状态的样式。

第三步：JavaScript代码

最后，使用JavaScript代码实现轮播图的动画效果和指示器切换功能：

const container = document.querySelector('.carousel-container');
const slide = document.querySelector('.carousel-slide');
const indicators = document.querySelectorAll('.indicator');

const imageWidth = slide.clientWidth / 4;
let index = 0;

function moveSlide() {
  slide.style.transform = `translateX(-${index * imageWidth}px)`;
}

function changeIndicator() {
  indicators.forEach((indicator, i) => {
    if (i === index) {
      indicator.classList.add('active');
    } else {
      indicator.classList.remove('active');
    }
  });
}

function nextSlide() {
  if (index === 3) {
    index = 0;
  } else {
    index++;
  }
  moveSlide();
  changeIndicator();
}

setInterval(nextSlide, 3000);

JavaScript代码通过获取轮播图容器、轮播图页面容器和轮播图指示器，来实现轮播图的动画效果和指示器切换功能。在这里我们定义了三个函数，分别为 moveSlide()、changeIndicator() 和 nextSlide()，通过 setInterval() 函数实现轮播图自动切换的效果。

示例说明

示例一：

参考这个轮播图，通过上述的HTML布局、CSS样式和JavaScript代码来实现此轮播图。

示例二：

参考这个轮播图，通过上述的HTML布局、CSS样式和JavaScript代码来实现此轮播图。