可以通过以下的代码实现图片数组中图片的切换效果:
// HTML结构
/*
<div id="slider">
<img id="image" src="image1.jpg">
</div>
<button onclick="previousImage()">上一张</button>
<button onclick="nextImage()">下一张</button>
*/
// JavaScript代码
var images = ["image1.jpg", "image2.jpg", "image3.jpg"]; // 图片数组
var currentIndex = 0; // 当前显示的图片索引
function previousImage() {
currentIndex--;
if (currentIndex < 0) {
currentIndex = images.length - 1;
}
document.getElementById("image").src = images[currentIndex];
}
function nextImage() {
currentIndex++;
if (currentIndex >= images.length) {
currentIndex = 0;
}
document.getElementById("image").src = images[currentIndex];
}
上述代码中,通过一个图片数组来存储所有图片的路径,然后使用一个currentIndex
变量来记录当前显示的图片索引。当点击上一张按钮时,currentIndex
减1,如果currentIndex
小于0,则将其设置为数组的最后一个元素的索引,然后将当前显示的图片的src
属性设置为images[currentIndex]
。当点击下一张按钮时,currentIndex
加1,如果currentIndex
大于等于数组的长度,则将其设置为0,然后将当前显示的图片的src
属性设置为images[currentIndex]
。
这样就实现了图片数组中图片的切换效果。