使用 HTML、CSS 和 javaScript 的图像滑块

2025-05-24

使用 HTML、CSS 和 javaScript 的图像滑块

在本文中，您将学习如何使用 HTML、CSS 和 JavaScript 编程代码创建图像滑块。我之前设计过许多其他类型的图像滑块，例如JavaScript 触摸图像滑块。希望您能像其他设计一样喜欢这个设计。

这种幻灯片通常用于各种网站的首页或图片库。通常，Web 开发人员会使用 jQuery 或不同类型的插件来创建这些幻灯片。
如果您想仅使用 HTML、CSS 和 JavaScript 创建一个图像滑块，而无需任何 jQuery 或插件，那么本文绝对能帮到您。为此，您需要了解基本的 HTML、CSS 和 JavaScript，然后才能理解以下编程代码。

✅观看实时预览👉👉图像滑块 HTML CSS

在本例中，我使用了三张图片，并在滑块周围添加了白色边框。此外，我还使用了两个按钮来切换图片。我使用 JavaScript 代码来激活这些按钮。

要创建图像滑块，首先需要create an HTML and CSS file。然后将该 CSS 文件附加到 HTML 文件[ <link rel="stylesheet" href="css.css">] 。

步骤 1：创建图像滑块的基本布局

复制下面的 HTML 编程代码，然后将其粘贴到您的 HTML 文件中。这里我使用了下面的 CSS 代码，它最初用于设计背景并赋予滑块形状。
您可以看到，我使用了width:600px和height 400px。如果您想增大或减小滑块的大小，您可以增加或减少相应的数值。

<div class="carousel-container">
  <!--Add Add Preview and Next buttons-->
  <!--Add Image-->
 </div>
Enter fullscreen mode Exit fullscreen mode 
  body{
            background-color: rgb(58, 58, 58);
            margin-top: 100px;
        }
   .carousel-container {
  width: 600px;
  height: 400px;
  position: relative;
  margin: 0 auto;

}
Enter fullscreen mode Exit fullscreen mode

创建图像滑块的基本布局

步骤 2：添加“上一个”和“下一个”按钮

正如您在上面的演示中看到的，我在这里使用了两个按钮。我使用了以下 HTML 编程代码来制作这两个按钮。下面我添加了一些最初用于设计此按钮的 CSS 代码。

在这种情况下，您会看到font-size is 25 px。如果您想增加此按钮的大小，当然可以增加这个值。在这种情况下，我使用了，position:absolute这意味着滑块中的两个按钮将固定在同一位置。

<div class="navigation">
          <div class="prev nav-btn"><</div>
          <div class="next nav-btn">></div>
        </div>
Enter fullscreen mode Exit fullscreen mode 
.navigation .prev {
  position: absolute;
  z-index: 10;
  font-size: 25px;
  top: 40%;
  left: 10px;
  font-weight: 700;
}
.navigation .next {
  right: 10px;
  position: absolute;
  font-size: 25px;
  z-index: 10;
  top: 40%;
}
.navigation .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;
}
Enter fullscreen mode Exit fullscreen mode

添加预览和下一步按钮

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

我使用下面的 HTML 代码，通过此图片滑块添加了图片，并添加了一些描述。图片数量如下different descriptions for each image。描述会随着图片的更改而变化。

<div class="carousel">
          <div class="item main">
            <img src="https://wallpapercave.com/wp/wp3473585.jpg" alt="mountain" />
            <div class="caption">Image 1</div>
          </div>
      <div class="item">
            <img src="https://i.pinimg.com/originals/cd/7b/5c/cd7b5c8d4687b5c98a445127926a56e2.jpg" alt="beach" />
            <div class="caption">Image 2</div>
          </div>
          <div class="item">
            <img src="https://i.ytimg.com/vi/-3N6fCzgXuc/maxresdefault.jpg" alt="cityscape" />
            <div class="caption">Image 3</div>
          </div>      
        </div>
Enter fullscreen mode Exit fullscreen mode

我还在下面添加了用于设计其中一些图像的 CSS 代码。在本例中，您会看到我在图像周围添加了边框border:8px solid white。


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

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

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

.main {
  display: block;
}
Enter fullscreen mode Exit fullscreen mode

在滑块中添加所需的图像和文本

正如我上面所说，我在这里使用了它，而不是添加描述。我为每张图片都提供了单独的描述。我已经添加了这些描述，现在我们将设计该描述。

.caption {
  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;
}
Enter fullscreen mode Exit fullscreen mode

设计描述

步骤 4：使用 JavaScript 代码激活两个按钮

到目前为止，我们只设计了这个滑块，现在我们将激活这里的按钮。激活按钮后，我们可以根据需要更改图像。当然，您需要了解这方面的基本 JavaScript 编程代码，然后才能理解以下 JavaScript。

const prev = document.querySelector('.prev');
const next = document.querySelector('.next');
const images = document.querySelector('.carousel').children;
const totalImages = images.length;
let index = 0;

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

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

function nextImage(direction) {
  if(direction == 'next') {
    index++;
    if(index == totalImages) {
      index = 0;
    }
  } else {
    if(index == 0) {
      index = totalImages - 1;
    } else {
      index--;
    }
  }

  for(let i = 0; i < images.length; i++) {
    images[i].classList.remove('main');
  }
  images[index].classList.add('main');
}
Enter fullscreen mode Exit fullscreen mode

使用 JavaScript 代码激活这两个按钮

相关文章：

  1. 简单页脚 HTML CSS
  2. 使用 JavaScript 的秒表
  3. JavaScript 年龄计算器
  4. 班加罗尔的IB学校
  5. HTML CSS 中的自动图像滑块

希望您通过本教程了解了我如何使用 HTML、CSS 和 JavaScript 创建此图像滑块。如果您有任何问题，欢迎随时评论You must comment on how you like this design。

您可以访问我的博客获取更多类似教程。https
://groundtutorial.com/

文章来源：https://dev.to/code_mystery/image-slider-using-html-css-and-javascript-5dfn
Devto 翻译
PREV
使用 Html、CSS 和 Javascript 的简单模拟时钟
NEXT
使用 Node.js 进行网页抓取！