image slideshow

图像幻灯片

现在我们可以创建一个示例图像幻灯片项目。将使用“下一个”和“上一个”按钮更改图像。

现在，我们来创建我们的HTML，其中包括一个图像和两个导航按钮：

<div>
  <button> 上一个 </button>
  <img id="slider" src="https://www.w3cschool.cn/statics/images/logo.png" />
  <button> 下一个 </button>
</div>

接下来，让我们在数组中定义我们的示例图像：

var images = [
   "https://www.w3cschool.cn/statics/images/1.png", 
   "https://www.w3cschool.cn/statics/images/2.png, 
   "https://www.w3cschool.cn/statics/images/3.png"
];

提示: 我们将使用我们上传到我们的服务器的三个示例图像。您可以使用任意数量的图像。

图像幻灯片

现在我们需要处理 "上一个" 和 "下一个" 按钮点击并调用相应的功能来更改图像。

HTML:

<div>
  <button onclick="prev()"> 上一个 </button>
  <img id="slider" src="https://www.PHP.cn/statics/images/1.png" />
  <button onclick="next()"> 下一个 </button>
</div>

JS:

var images = [
   "https://www.PHP.cn/statics/images/1.png", 
   "https://www.PHP.cn/statics/images/2.png, 
   "https://www.PHP.cn/statics/images/3.png"
];
var num = 0;
function next() {
  var slider = document.getElementById("slider");
  num++;
  if(num >= images.length) {
    num = 0;
  }
  slider.src = images[num];
  }
function prev() {
  var slider = document.getElementById("slider");
  num--;
  if(num < 0) {
    num = images.length-1;
  }
  slider.src = images[num];
}

提示: num 变量保存当前图像。下一个和上一个按钮点击由他们相应的功能来处理，这些功能会将图像的源更改为数组中的下一个/上一个图像。