如何使用基本的HTML、CSS和JavaScript制作一个图像旋转木马

图片旋转木马是一个图片或信息的容器（幻灯片），用户可以通过点击一个按钮来选择，在幻灯片中引导他们向前或向后。图片旋转木马通过增强用户体验，使网站更具互动性。

图片的集合可以通过计时器自动改变，也可以在用户点击显示的按钮时手动改变。

目标

本教程的目标是在网站上添加一个图片转盘以改善用户界面。我们将使用基本的HTML、CSS和JavaScript实现这一目标。

前提条件

要继续学习本教程。

• 读者应具备HTML、CSS和JavaScript的基本知识，特别是Javascript中函数的使用。
• 读者应该安装一个代码编辑器。我推荐的代码编辑器是[Visual Studio代码]。

程序

第1步 - 创建一个新项目

打开Visual Studio Code，建立一个新的文件夹。在该文件夹中添加三个以.html扩展名、.css扩展名和.js扩展名结尾的文件，作为HTML、CSS和JavaScript文件，你将在其中输入以下代码片段。

第2步 - 编写HTML代码

HTML就像我们代码的骨架，它将为我们的工作奠定框架，我们将继续使用其他语言进行修改。

在这一步，我们将使用<div> 标签来定义图片的容器。我们还将定义我们的按钮，使用户能够在旋转木马上移动。

我们还将定义旋转木马底部的小圆圈。代码中有注释，可以让人跟进。潜入HTML文件，写出如下图所示的代码。

 <!-- Slideshow container -->
<div class="slideshow-container fade">

  <!-- Full images with numbers and message Info -->
  <div class="Containers">
    <div class="MessageInfo">1 / 3</div>
    <img src="image1.jpg" style="width:100%">
    <div class="Info">First caption</div>
  </div>

  <div class="Containers">
    <div class="MessageInfo">2 / 3</div>
    <img src="image2.jpg" style="width:100%">
    <div class="Info">Second Caption</div>
  </div>

  <div class="Containers">
    <div class="MessageInfo">3 / 3</div>
    <img src="image3.jpg" style="width:100%">
    <div class="Info">Third Caption</div>
  </div>

  <!-- Back and forward buttons -->
  <a class="Back" onclick="plusSlides(-1)">&#10094;</a>
  <a class="forward" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>

<!-- The circles/dots -->
<div style="text-align:center">
  <span class="dots" onclick="currentSlide(1)"></span>
  <span class="dots" onclick="currentSlide(2)"></span>
  <span class="dots" onclick="currentSlide(3)"></span>
</div> 

第3步 编写CSS代码

在CSS文件中，我们将为我们的HTML设置样式。我们为图像、按钮和小圆圈（我们称之为导航圆圈）设计容器。我们还将使用各种CSS属性将它们定位在所需的位置。下面的代码有注释，可以让人进行跟踪。

* {box-sizing:border-box}

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

/* Make the images invisible by default */
.Containers {
  display: none;
}

/* forward & Back buttons */
.Back, .forward {
  cursor: pointer;
  position: absolute;
  top: 48%;
  width: auto;
  margin-top: -23px;
  padding: 17px;
  color: grey;
  font-weight: bold;
  font-size: 19px;
  transition: 0.4s ease;
  border-radius: 0 5px 5px 0;
  user-select: none;
}

/* Place the "forward button" to the right */
.forward {
  right: 0;
  border-radius: 4px 0 0 4px;
}

/*when the user hovers,add a black background with some little opacity */
.Back:hover, .forward:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption Info */
.Info {
  color: #e3e3e3;
  font-size: 16px;
  padding: 10px 14px;
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;
}

/* Worknumbering (1/3 etc) */
.MessageInfo {
  color: #f2f2f3;
  font-size: 14px;
  padding: 10px 14px;
  position: absolute;
  top: 0;
}

/* The circles or bullets and indicators */
.dots {
  cursor: pointer;
  height: 16px;
  width: 16px;
  margin: 0 3px;
  background-color: #acc;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.5s ease;
}

.enable, .dots:hover {
  background-color: #717161;
}

/* Faint animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.4s;
  animation-name: fade;
  animation-duration: 1.4s;
}

@-webkit-keyframes fade {
  from {opacity: .5}
  to {opacity: 2}
}

@keyframes fade {
  from {opacity: .5}
  to {opacity: 2}
}

第4步 - 编写JavaScript代码

在这一步，我们将定义我们在HTML文件中链接到我们的按钮的功能。我们还将包括一个定时器，以便我们的图片转盘像幻灯片一样自动显示图片。在JavaScript文件中输入下面的JavaScript代码。

var slidePosition = 1;
SlideShow(slidePosition);

// forward/Back controls
function plusSlides(n) {
  SlideShow(slidePosition += n);
}

//  images controls
function currentSlide(n) {
  SlideShow(slidePosition = n);
}

function SlideShow(n) {
  var i;
  var slides = document.getElementsByClassName("Containers");
  var circles = document.getElementsByClassName("dots");
  if (n > slides.length) {slidePosition = 1}
  if (n < 1) {slidePosition = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < circles.length; i++) {
      circles[i].className = circles[i].className.replace(" enable", "");
  }
  slides[slidePosition-1].style.display = "block";
  circles[slidePosition-1].className += " enable";
} 

此外，确保将你想在旋转木马中显示的图片与你的三个文件放在同一个文件夹中，以便快速和方便地访问。

为了使旋转木马在没有用户输入的情况下自动改变图片，我们需要修改我们的JavaScript代码。在这段代码中，我们将包括一个2秒的定时器。

var slidePosition = 0;
SlideShow();

function SlideShow() {
  var i;
  var slides = document.getElementsByClassName("Containers");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slidePosition++;
  if (slidePosition > slides.length) {slidePosition = 1}
  slides[slidePosition-1].style.display = "block";
  setTimeout(SlideShow, 2000); // Change image every 2 seconds
} 

测试

人们可以通过导航到存放项目的文件夹并使用任何浏览器打开HTML文件来测试代码是否工作。该代码应该可以正常工作。请看下面一个来自Usain Bolt网站的图片旋转木马的例子。

总结

在这篇文章中，我们已经学会了如何在网站上实现图像传送带。图片旋转木马可以通过向左或向右滚动查看各种图片或视频，从而获得网站的概况。

图片传送带在网站中是必不可少的，因为它们可以改善网站的用户界面和体验。图片旋转木马是展示内容卡片的好方法。