图像幻灯片
现在我们可以创建一个示例图像幻灯片项目。将使用“下一个”和“上一个”按钮更改图像。
现在，我们来创建我们的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" ];
提示: 我们将使用我们上传到我们的服务器的三个示例图像。您可以使用任意数量的图像。
arr = 'A','B','C';
图像幻灯片
现在我们需要处理 "上一个" 和 "下一个" 按钮点击并调用相应的功能来更改图像。
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 变量保存当前图像。下一个和上一个按钮点击由他们相应的功能来处理，这些功能会将图像的源更改为数组中的下一个/上一个图像。