<style>
img {
width: 400px;
height: 200px;
}
.active {
background-color: grey;
}
</style>
<div>
<img class="img" src="images/1.png" alt="">
</div>
<button class="active">1</button>
<button>2</button>
<button>3</button>
<script src="script/jquery.js"></script>
<script src="script/jquery.js"></script>
<script>
let images = [
"images/1.png",
"images/2.png",
"images/3.png"
]
$("button").click(function () {
let index = $(this).index();
$("img").attr("src", images[index - 1]);
$(this).addClass("active");
$(this).siblings("button").removeClass("active");
})
console.log(images)
</script>
![请添加图片描述](https://i-blog.csdnimg.cn/blog_migrate/3fd0759c2abe437250f71972f1ddc790.png)