轮播图是现代网页设计中常用的元素之一。它可以吸引用户的注意力，展示最重要的信息，同时也可以提高页面的可用性和用户体验。

在本篇文章中，我们将学习如何使用 HTML、CSS 和 JavaScript 创建一个简单而漂亮的主轮播图。我们将涵盖以下主题：

1. HTML 结构
2. CSS 样式
3. JavaScript 动画效果

1. HTML 结构

让我们来看一下轮播图的 HTML 结构。我们需要一个容器 <div> 来包含整个轮播图，每张图片需要一个 <img> 元素，还需要一些导航按钮来切换图片。

<div class="slider">
  <img src="image1.jpg" alt="Image 1" />
  <img src="image2.jpg" alt="Image 2" />
  <img src="image3.jpg" alt="Image 3" />

  <button class="prev">Previous</button>
  <button class="next">Next</button>
</div>

2. CSS 样式

我们需要为轮播图添加 CSS 样式。我们将使用 flexbox 布局来使图片水平居中，并将导航按钮放在轮播图底部。

.slider {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

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

.prev,
.next {
  position: absolute;
  bottom: 10px;
  padding: 8px 16px;
  background-color: #333;
  color: white;
  border: none;
  cursor: pointer;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

3. JavaScript 动画效果

我们需要为轮播图添加 JavaScript 动画效果。我们将使用一个计时器来自动轮播图片，并为导航按钮添加事件监听器。

const slider = document.querySelector(".slider");
const prevBtn = slider.querySelector(".prev");
const nextBtn = slider.querySelector(".next");
const slides = slider.querySelectorAll("img");

let currentSlide = 0;
let timer;

function showSlide(n) {
  slides[currentSlide].classList.remove("active");
  slides[n].classList.add("active");
  currentSlide = n;
}

function autoSlide() {
  if (currentSlide === slides.length - 1) {
    showSlide(0);
  } else {
    showSlide(currentSlide + 1);
  }
}

prevBtn.addEventListener("click", () => {
  if (currentSlide === 0) {
    showSlide(slides.length - 1);
  } else {
    showSlide(currentSlide - 1);
  }
});

nextBtn.addEventListener("click", () => {
  if (currentSlide === slides.length - 1) {
    showSlide(0);
  } else {
    showSlide(currentSlide + 1);
  }
});

timer = setInterval(autoSlide, 3000);

我们已经完成了主轮播图的制作！您可以在以下代码片段中查看完整的 HTML、CSS 和 JavaScript 代码。

<div class="slider">
  <img src="image1.jpg" alt="Image 1" />
  <img src="image2.jpg" alt="Image 2" />
  <img src="image3.jpg" alt="Image 3" />

  <button class="prev">Previous</button>
  <button class="next">Next</button>
</div>

<style>
  .slider {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
  }

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

  .prev,
  .next {
    position: absolute;
    bottom: 10px;
    padding: 8px 16px;
    background-color: #333;
    color: white;
    border: none;
    cursor: pointer;
  }

  .prev {
    left: 10px;
  }

  .next {
	right: 10px;
  }

  .active {
	display: block;
  }
</style>

<script>
const slider = document.querySelector(".slider");
const prevBtn = slider.querySelector(".prev");
const nextBtn = slider.querySelector(".next");
const slides = slider.querySelectorAll("img");

let currentSlide = 0;
let timer;

function showSlide(n) {
	slides[currentSlide].classList.remove("active");
	slides[n].classList.add("active");
	currentSlide = n;
}

function autoSlide() {
	if (currentSlide === slides.length - 1) {
		showSlide(0);
	} else {
		showSlide(currentSlide + 1);
	}
}

prevBtn.addEventListener("click", () => {
	if (currentSlide === 0) {
		showSlide(slides.length - 1);
	} else {
		showSlide(currentSlide - 1);
	}
});

nextBtn.addEventListener("click", () => {
	if (currentSlide === slides.length - 1) {
		showSlide(0);
	} else {
		showSlide(currentSlide + 1);
	}
});

timer = setInterval(autoSlide, 3000);
</script>

在这篇文章中，我们学习了如何使用 HTML、CSS 和 JavaScript 创建一个简单而漂亮的主轮播图。您可以根据自己的需要进行修改和定制，并将其应用到自己的网站中。

本文链接：http://task.lmcjl.com/news/12664.html