如何使用 JavaScript、HTML 和 CSS 创建轮播图

介绍

轮播图是由一系列可以按顺序滚动的帧组成。轮播图中的帧可以是图片、视频，甚至是 HTML 元素（例如描述或评论）。许多现代网站都使用轮播图。开发者在需要传达网站信息但又不想占用太多空间时，会使用轮播图。.

例如，假设一位开发者正在开发一个产品网站，他可能希望向用户展示用户评价或评论，以便用户信任并购买他的产品。开发者可以创建一个轮播图，方便用户轻松浏览和阅读每条评论。产品图片也可以采用同样的方法，开发者可以创建一个产品图片轮播图，让用户能够360度全方位地查看产品。.

先决条件

我们将学习如何使用 HTML、CSS 和 JavaScript 创建一个基本的 CSS 图片轮播图。为了充分理解其中的原理和操作步骤，您需要预先了解一些概念。让我们一起来看看这些概念。.

HTML：您应该具备HTML基础知识，例如元素和标签。我们将使用各种标签和元素来创建一个轮播图，因此您应该了解每个标签或元素在轮播图中的作用。.
CSS：我们将大量使用 CSS 来创建轮播图。您应该了解一些 CSS 中级概念，例如堆叠、z-index、定位和动画。创建轮播图时，所有这些概念都将用到。.
JavaScript：您应该了解一些基本的 JavaScript 知识，例如变量声明、使用 for 循环和 DOM 操作。这些知识用于操作滑块和创建各种效果。.

熟悉了这些概念之后，我们来创建一个滑块。我们会逐步讲解每个概念以及我们这样做的原因。.

步骤 1：使用 HTML 代码创建基本图像轮播布局

让我们来创建轮播图的基本框架。正如前面提到的，轮播图是由多个框架组成的。我们将创建一个 CSS 图片轮播图。.

首先，我们创建包含轮播图片和功能的父级div元素。我们还添加了一些样式，例如更改背景颜色以及设置父级div元素的高度和宽度。.

<!DOCTYPE html>
<html>
<head>
<title>Slider in CSS</title>
<style>
</style>
</head>
<body>
<div id="parent-container">
<!-- This div will contain all images and buttons we will be using for Slider
-->
</div>
</body>
</html>

完成这一步后，我们继续进行下一部分。.

轮播图有两个按钮：上一张和下一张。它们用于在轮播图的各个帧之间导航。我们将在父级部分添加一些基本按钮。这些按钮将帮助用户浏览轮播图中的图片。为了简单起见，我们将使用 < 和 > 作为按钮文本，分别表示上一张和下一张。.

除了添加基本的 HTML 按钮之外，我们还会稍作调整，使它们相对于中心 div 垂直对齐。这样做是为了方便用户滚动浏览轮播图。我们将使用相对定位来实现按钮的垂直对齐。.

<!DOCTYPE html>
<html>
<head>
<title>Slider in CSS</title>
<style>

body{
background-color: rgb(58, 58, 58);
margin-top: 100px;
}
.carousel-container {
width: 600px;
height: 400px;
position: relative;
margin: 0 auto;

}

.navigation-buttons .previous {
position: absolute;
z-index: 10;
font-size: 25px;
top: 40%;
left: 10px;
font-weight: 700;
}

.navigation-buttons .next {
right: 10px;
position: absolute;
font-size: 25px;
z-index: 10;
top: 40%;
}

.navigation-buttons .nav-btn {
background: rgba(255, 255, 255, 0.55);
cursor: pointer;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}

.navigation .nav-btn:hover {
background: white;
}

</style>
</head>
<body>

<div id="parent-container">

<div class="navigation-buttons">
<div class="previous nav-btn"><</div>
<div class="next nav-btn">></div>
</div>

</div>

</body>
</html>

输出

步骤 3：向滑块添加所需的图像和文本

添加完按钮后，现在该添加图片了。我们将使用花朵图片创建一个 CSS 图片轮播。图片将借助 position 和 z-index 属性堆叠显示。由于我们只需要显示一张图片，因此我们将使用一个基类并将其可见性设置为 visible。其余图片将被隐藏，以防止它们显示给用户。.

轮播图上还会显示文字，表明用户当前正在查看的图片。这有助于用户了解轮播图中有多少张图片以及它们的顺序。.

<!DOCTYPE html>
<html>
<head>
<title>Slider in CSS</title>
<style>

body{
background-color: rgb(58, 58, 58);
margin-top: 100px;
}
.carousel-container {
width: 600px;
height: 400px;
position: relative;
margin: 0 auto;

}

.navigation-buttons .previous {
position: absolute;
z-index: 10;
font-size: 25px;
top: 40%;
left: 10px;
font-weight: 700;
}

.navigation-buttons .next {
right: 10px;
position: absolute;
font-size: 25px;
z-index: 10;
top: 40%;
}

.navigation-buttons .nav-btn {
background: rgba(255, 255, 255, 0.55);
cursor: pointer;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}

.navigation .nav-btn:hover {
background: white;
}

.slider-carousel {
margin-top: 20px;
transition: all 0.3s ease;

}
.slider-carousel img {
width: 100%;
transition: all 0.3s ease;
border:8px solid white;
}

.images {
position: absolute;
display: none;
}

.main {
display: block;
}

.image-text {
position: absolute;
bottom: 0;
width: 103%;
display: flex;
font-size: 20px;
justify-content: center;
align-items: center;
color: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0.3);
height: 35px;
}

</style>
</head>
<body>

<div id="parent-container">
<div class="navigation-buttons">
<div class="previous nav-btn"><</div>
<div class="next nav-btn">></div>
</div>

<div class="slider-carousel">
<div class="images main">
<img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__480.jpg" alt="flower 1" />
<div class="image-text">Image 1</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg" alt="flower 2" />
<div class="image-text">Image 2</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="flower 3" />
<div class="image-text">Image 3</div>
</div>
</div>
</div>
</body>
</html>

输出

步骤 4：使用 JavaScript 代码启用这两个按钮

我们已经创建了轮播图类，并将所有图片都添加到了其中。现在我们需要启用上一张和下一张按钮。我们将使用 JavaScript。.

首先，我们需要为这些按钮添加事件监听器。每次用户点击“上一页”或“下一页”按钮时，都应该执行与该按钮相关的操作。那么我们该如何实现呢？

我们使用主类来指示用户应该看到哪张图片。我们需要控制哪些图片拥有这个类。任何其他图片都将被隐藏，只有拥有主类的图片才会对用户可见。为了实现这一点，我们将使用 DOM 操作。DOM 操作可以帮助我们从现有图片中移除主类，并将其添加到新图片中。.

现在，为了确定哪张图片应该拥有主类，我们使用“上一张”和“下一张”按钮的事件监听器。首先，我们需要获取轮播图中的所有图片。我们可以看到父级轮播图组件将图片分成了多个部分。我们可以使用 DOM 中的查询选择器来获取这些部分。获取到所有图片 div 后，我们需要选择合适的图片并为其添加主类。其余的图片将没有主类，因此对用户不可见。我们可以初始化一个初始值为 0 的变量。该变量指示当前用户可见的图片。每次用户点击“上一张”或“下一张”按钮时，我们都会相应地递增或递减该变量的值。如果该值为 0，并且用户点击了“上一张”，则将其值更改为（div 中的图片数量 - 1）。同样地，如果该变量指向最后一张图片，并且用户点击了“下一张”，则将其值更改为 0。.

<!DOCTYPE html>
<html>
<head>
<title>Slider in CSS</title>
<style>

body{
background-color: rgb(58, 58, 58);
margin-top: 100px;
}
.carousel-container {
width: 600px;
height: 400px;
position: relative;
margin: 0 auto;

}

.navigation-buttons .previous {
position: absolute;
z-index: 10;
font-size: 25px;
top: 40%;
left: 10px;
font-weight: 700;
}

.navigation-buttons .next {
right: 10px;
position: absolute;
font-size: 25px;
z-index: 10;
top: 40%;
}

.navigation-buttons .nav-btn {
background: rgba(255, 255, 255, 0.55);
cursor: pointer;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}

.navigation .nav-btn:hover {
background: white;
}

.slider-carousel {
margin-top: 20px;
transition: all 0.3s ease;

}
.slider-carousel img {
width: 100%;
transition: all 0.3s ease;
border:8px solid white;
}

.images {
position: absolute;
display: none;
}

.main {
display: block;
}

.image-text {
position: absolute;
bottom: 0;
width: 103%;
display: flex;
font-size: 20px;
justify-content: center;
align-items: center;
color: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0.3);
height: 35px;
}

</style>
</head>
<body>

<div id="parent-container">

<div class="navigation-buttons">
<div class="previous nav-btn"><</div>
<div class="next nav-btn">></div>
</div>

<div class="slider-carousel">
<div class="images main">
<img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__480.jpg" alt="flower 1" />
<div class="image-text">Image 1</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg" alt="flower 2" />
<div class="image-text">Image 2</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="flower 3" />
<div class="image-text">Image 3</div>
</div>
</div>

</div>

<script>

const previous = document.querySelector('.previous');
const next = document.querySelector('.next');
const images = document.querySelector('.slider-carousel').children;
const totalImages = images.length;
let currentIndex = 0;


// Event Listeners to previous and next buttons
previous.addEventListener('click', () => {
previousImage()
})

next.addEventListener('click', () => {
nextImage();
})


// Function to go to next Image
function nextImage(){

images[currentIndex].classList.remove('main');
if(currentIndex == totalImages-1){
currentIndex = 0;
}
else{
currentIndex++;
}

images[currentIndex].classList.add('main');

}

// Function to go to previous Image
function previousImage(){

images[currentIndex].classList.remove('main');
if(currentIndex == 0){
currentIndex = totalImages-1;
}
else{
currentIndex--;
}

images[currentIndex].classList.add('main');

}

</script>

</body>
</html>

输出

恭喜，您已使用 HTML、CSS 和 JavaScript 创建了一个 CSS 滑块。.

幻灯片功能

我们的轮播图目前采用手动控制方式。也就是说，图片只有在用户点击“上一张”或“下一张”按钮后才会切换。然而，大多数在线轮播图并非如此。它们具有幻灯片播放效果，可以按照设定的时间自动切换图片。.

我们也可以在滑块中实现这一点。使用 JavaScript，我们可以使用 `setInterval` 函数，它会在指定时间后自动调用下一个函数。这有助于滑块自动工作，并在指定时间后更新滑块。.

<!DOCTYPE html>
<html>
<head>
<title>Slider in CSS</title>
<style>

body{
background-color: rgb(58, 58, 58);
margin-top: 100px;
}
.carousel-container {
width: 600px;
height: 400px;
position: relative;
margin: 0 auto;

}

.navigation-buttons .previous {
position: absolute;
z-index: 10;
font-size: 25px;
top: 40%;
left: 10px;
font-weight: 700;
}

.navigation-buttons .next {
right: 10px;
position: absolute;
font-size: 25px;
z-index: 10;
top: 40%;
}

.navigation-buttons .nav-btn {
background: rgba(255, 255, 255, 0.55);
cursor: pointer;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}

.navigation .nav-btn:hover {
background: white;
}

.slider-carousel {
margin-top: 20px;
transition: all 0.3s ease;

}
.slider-carousel img {
width: 100%;
transition: all 0.3s ease;
border:8px solid white;
}

.images {
position: absolute;
display: none;
}

.main {
display: block;
}

.image-text {
position: absolute;
bottom: 0;
width: 103%;
display: flex;
font-size: 20px;
justify-content: center;
align-items: center;
color: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0.3);
height: 35px;
}

</style>
</head>
<body>

<div id="parent-container">

<div class="navigation-buttons">
<div class="previous nav-btn"><</div>
<div class="next nav-btn">></div>
</div>

<div class="slider-carousel">
<div class="images main">
<img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__480.jpg" alt="flower 1" />
<div class="image-text">Image 1</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg" alt="flower 2" />
<div class="image-text">Image 2</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="flower 3" />
<div class="image-text">Image 3</div>
</div>
</div>

</div>

<script>

const previous = document.querySelector('.previous');
const next = document.querySelector('.next');
const images = document.querySelector('.slider-carousel').children;
const totalImages = images.length;
let currentIndex = 0;


// Event Listeners to previous and next buttons
previous.addEventListener('click', () => {
previousImage()
})

next.addEventListener('click', () => {
nextImage();
})

setInterval(()=>{
nextImage();
},1000);

// Function to go to next Image
function nextImage(){

images[currentIndex].classList.remove('main');
if(currentIndex == totalImages-1){
currentIndex = 0;
}
else{
currentIndex++;
}

images[currentIndex].classList.add('main');

}

// Function to go to previous Image
function previousImage(){

images[currentIndex].classList.remove('main');
if(currentIndex == 0){
currentIndex = totalImages-1;
}
else{
currentIndex--;
}

images[currentIndex].classList.add('main');

}

</script>

</body>
</html>

输出

导航点

除了在轮播图中使用标题或图片文字外，您还可以使用导航点。导航点的作用与文字或标题类似，它们可以告诉用户当前所在的页面。导航点在许多现代轮播图中都很常见，因为它们方便易用，而且创建起来也很简单。导航点通常是单选按钮。.

使用导航点的优势在于，它使用户能够轻松访问滑块的每一帧。与传统滑块需要用户逐一访问每张图片不同，导航点允许用户通过点击与该图片对应的导航点来访问每一帧或每一张图片。.

导航点的基本原理与滑动图片类似。当前图片会对应一个带有 active 类的导航按钮。图片切换后，active 类会被移动或添加到当前图片和当前导航点上。.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}

body {font-family: Verdana, sans-serif; margin:0}

.images {display: none}

img {
vertical-align: middle;
width:100%;
}

/* Slideshow container */
.carousel-container {
max-width: 1000px;
position: relative;
margin: auto;
}

/* Next & previous buttons */
.previous, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}

/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit seethrough */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}


/* The dots/bullets/indicators */
.navigation-dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .navigation-dot:hover {
background-color: #717171;
}
</style>
</head>
<body>
<div class="carousel-container">
<div class="images fade">
<img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__480.jpg">
</div>
<div class="images fade">
<img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg">
</div>
<div class="images fade">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg">
</div>

<!-- Previous and Next Buttons -->
<a class="previous" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>

<!-- Navigation Dots-->
<div style="text-align:center">
<span class="navigation-dot" onclick="currentSlide(1)"></span>
<span class="navigation-dot" onclick="currentSlide(2)"></span>
<span class="navigation-dot" onclick="currentSlide(3)"></span>
</div>
<script>
var currentIndex = 1;

//Show current image
showSlides(currentIndex);

//Function to move Next
function plusSlides(n) {
showSlides(currentIndex += n);
}

//Function to move back
function currentSlide(n) {
showSlides(currentIndex = n);
}


//Initiate moving of slides
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("images");
var dots = document.getElementsByClassName("navigation-dot");
if (n > slides.length) {currentIndex = 1}
if (n < 1) {currentIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[currentIndex-1].style.display = "block";
dots[currentIndex-1].className += " active";
}
</script>
</body>
</html>

输出

另一个例子

使用 JavaScript 创建的滑块在浏览器中启用时可以正常工作。一旦用户禁用 JavaScript，滑块将无法工作，因为它需要使用 JavaScript 来实现其功能。.

您无需使用 JavaScript 即可创建轮播图。您甚至可以仅使用 HTML 和 CSS 创建轮播图。您只需要了解用户点击“上一张”或“下一张”按钮时的工作原理即可。使用 HTML 和 CSS 创建的轮播图占用更少的浏览器内存，即使浏览器禁用 JavaScript 也能正常工作。.

您可以使用它们的属性来创建激活类。例如，对于导航按钮，您可以创建一个激活类，使其在按钮被点击或鼠标悬停时生效。这与 JavaScript 的工作方式类似，但不同之处在于，我们不会使用 DOM 操作，而是使用 CSS 函数（例如 target 等）来实现此功能。.

我们使用 HTML 和 CSS 为您创建了一个示例轮播图。我们使用了类似 check 的伪类来判断用户最近点击了哪个导航点，然后据此向用户显示相应的图片。由于我们没有隐藏图片，因此为每张图片都设置了边距和内边距。.

<!DOCTYPE html>
<html>

<head>
<title> Slider using HTML and CSS </title>
<style>

img{
height:100%;
width:100%;
}

#frame {
margin: 0 auto;
height:400px;
width: 600px;
max-width: 100%;
}

#frame input[type=radio] {

display: none;
}

#frame label {
cursor: pointer;
text-decoration: none;
}

#slides {
padding: 10px;
background: #00F;
position: relative;
z-index: 1;
}

#overflow {
width: 100%;
overflow: hidden;
}

#frame1:checked~#slides .inner {
margin-left: 0;
}

#frame2:checked~#slides .inner {
margin-left: -100%;
}

#frame3:checked~#slides .inner {
margin-left: -200%;
}

#slides .inner {
transition: margin-left 800ms
cubic-bezier(0.770, 0.000, 0.175, 1.000);
width: 400%;
line-height: 0;
height: 300px;
}

#slides .frame {
width: 25%;
float: left;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: black;
}

#controls {
margin: -180px 0 0 0;
width: 100%;
height: 50px;
z-index: 3;
position: relative;
}

#controls label {
transition: opacity 0.2s ease-out;
display: none;
width: 50px;
height: 50px;
opacity: .4;
}

#controls label:hover {
opacity: 1;
}

/* active class for images*/
#frame1:checked~#controls label:nth-child(2),
#frame2:checked~#controls label:nth-child(3),
#frame3:checked~#controls label:nth-child(1){
float: right;
margin: 0 -50px 0 0;
display: block;
}

/* active class for navigation button*/
#frame1:checked~#controls label:nth-last-child(2),
#frame2:checked~#controls label:nth-last-child(3),
#frame3:checked~#controls label:nth-last-child(1){
float: left;
margin: 0 0 0 -50px;
display: block;
}

#bullets {
margin: 150px 0 0;
text-align: center;
}

#bullets label {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 100%;
background: #ccc;
margin: 0 10px;
}

#frame1:checked~#bullets label:nth-child(1),
#frame2:checked~#bullets label:nth-child(2),
#frame3:checked~#bullets label:nth-child(3){
background: #444;
}

</style>
</head>

<body>
<div id="frame">
<input type="radio" name="frame" id="frame1" checked />
<input type="radio" name="frame" id="frame2" />
<input type="radio" name="frame" id="frame3" />
<div id="slides">
<div id="overflow">
<div class="inner">
<div class="frame">
<img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__480.jpg">
</div>
<div class="frame">
<img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg">
</div>
<div class="frame">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg">
</div>
</div>
</div>
</div>
<div id="controls">
<label for="frame1"></label>
<label for="frame2"></label>
<label for="frame3"></label>
</div>
<div id="bullets">
<label for="frame1"></label>
<label for="frame2"></label>
<label for="frame3"></label>
</div>
</div>
</body>

</html>

输出

结果

滑块是一系列帧，可以按顺序滚动浏览每一帧。.
如今许多网站都使用它们来展示评论或用户评价。.
要构建滑块，用户必须了解 HTML 标签、CSS 堆叠、定位等概念，以及 JavaScript 变量和 DOM 操作等基本知识。.
滑块的工作原理是：当某个元素处于激活状态时，它会显示出来。其余的元素则默认隐藏。当用户将鼠标悬停在按钮或光标上时，我们会通过 DOM 操作来改变具有激活类的元素。.
如果用户的浏览器未启用 JavaScript，则滑块将无法工作。.
您仅使用 HTML 和 CSS 即可创建滑块。这样可以节省浏览器内存和计算时间。它也适用于任何支持 HTML 和 CSS 的浏览器。.

如何使用 JavaScript、HTML 和 CSS 创建滑块

介绍

先决条件

步骤 1：使用 HTML 代码创建基本图像轮播布局

步骤二：添加上一页和下一页按钮

输出

步骤 3：向滑块添加所需的图像和文本

输出

步骤 4：使用 JavaScript 代码启用这两个按钮

输出

幻灯片功能

输出

导航点

输出

另一个例子

输出

结果

在本文中：

文章作者：哈迪·巴哈多里

发表回复

教育如何将现有项目推送到 GitHub

教育如何在 DigitalOcean 上收集托管数据库即服务 (DBaaS) 的可抓取指标

如何创建一个专用的 CS2（反恐精英2）服务器

10 种最适合入门编程的语言

如何使用 Netcat 创建和测试 TCP 和 UDP 连接

VirtualBox 安装教程

Wbuntu：外观类似 Windows 11 的 Ubuntu 操作系统

如何在 Ubuntu 20.04 中配置软件仓库

《黑暗之魂》系列的故事

使用 Olama 和 Open WebUI 托管 AI 聊天机器人

如何使用 JavaScript、HTML 和 CSS 创建滑块

介绍

先决条件

步骤 1：使用 HTML 代码创建基本图像轮播布局

步骤二：添加上一页和下一页按钮

输出

步骤 3：向滑块添加所需的图像和文本

输出

步骤 4：使用 JavaScript 代码启用这两个按钮

输出

幻灯片功能

输出

导航点

输出

另一个例子

输出

结果

在本文中：

文章作者： 哈迪·巴哈多里

跟随

发表回复

您可能也喜欢

文章作者：哈迪·巴哈多里