用 html 写一个前后端分离的轮播图

首先，需要了解前后端分离的概念。前后端分离是指前端与后端的开发分离，前端只负责页面展示，后端负责数据处理、业务逻辑等。因此，前端需要通过接口与后端进行数据交互。

接下来，我们可以用 HTML、CSS 和 JavaScript 来实现一个前后端分离的轮播图。

1. 首先，在 HTML 中创建轮播图的结构。

<div class="slider">
  <div class="slider-wrapper">
    <div class="slider-item">
      <img src="img/slide1.jpg" alt="Slide 1">
    </div>
    <<div class="slider-item">
      <img src="img/slide2.jpg" alt="Slide 2">
    </div>
    <div class="slider-item">
      <img src="img/slide3.jpg" alt="Slide 3">
    </div>
  </div>
</div>

2. 使用 CSS 对轮播图进行样式美化。

.slider {
  width: 100%;
  height: 400px;
  overflow: hidden;
  position: relative;
}

.slider-wrapper {
  width: 300%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.5s ease-in-out;
}

.slider-item {
  width: 33.33%;
  height: 100%;
  float: left;
}

.slider-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

3. 使用 JavaScript 实现轮播图的自动播放和手动切换。

const sliderWrapper = document.querySelector('.slider-wrapper');
const sliderItems = document.querySelectorAll('.slider-item');
const sliderControls = document.querySelectorAll('.slider-control');
let currentSlide = 0;
let isAutoPlay = true;

// 自动播放
function autoPlay() {
  if (isAutoPlay) {
    currentSlide++;
    if (currentSlide >= sliderItems.length) {
      currentSlide = 0;
    }
    sliderWrapper.style.transform = `translateX(-${currentSlide * 100}%)`;
  }
  setTimeout(autoPlay, 3000);
}

// 手动切换
sliderControls.forEach((control, index) => {
  control.addEventListener('click', () => {
    currentSlide = index;
    sliderWrapper.style.transform = `translateX(-${currentSlide * 100}%)`;
    isAutoPlay = false;
  });
});

autoPlay();

4. 最后，在后端编写接口，提供轮播图的数据。

const slides = [
  {
    id: 1,
    title: 'Slide 1',
    imageUrl: 'img/slide1.jpg',
  },
  {
    id: 2,
    title: 'Slide 2',
    imageUrl: 'img/slide2.jpg',
  },
  {
    id: 3,
    title: 'Slide 3',
    imageUrl: 'img/slide3.jpg',
  },
];

// 轮播图数据接口
app.get('/api/slider', (req, res) => {
  res.json(slides);
});

5. 前端通过 AJAX 请求接口获取轮播图数据，并将数据渲染到页面中。

const sliderWrapper = document.querySelector('.slider-wrapper');

// 获取轮播图数据
function getSliderData() {
  return fetch('/api/slider')
    .then(response => response.json())
    .catch(error => console.log(error));
}

// 渲染轮播图
function renderSlider(slides) {
  sliderWrapper.innerHTML = '';
  slides.forEach(slide => {
    sliderWrapper.innerHTML += `
      <div class="slider-item">
        <img src="${slide.imageUrl}" alt="${slide.title}">
      </div>
    `;
  });
}

getSliderData().then(slides => {
  renderSlider(slides);
});

这样，一个简单的前后端分离的轮播图就完成了。需要注意的是，这只是一个示例，具体的实现方式可能会因需求不同而有所差异。