效果图
实现点击按钮切换图片的效果
具体代码
这个其实 跟轮播图很像 ，如果想自己循环播放 ，并且有动画，建议swiper实现。
Swiper演示 - Swiper中文网
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 400px;height: 200px;}img {width: 100%;height: 100%;}</style></head><body><span id="text"></span><div><img id="img" alt=""></div><button id="pret">上一张</button><button id="next">下一张</button></body><script>//图片地址数组。我用的网络图。你可以自行替换let imgArr = ["/image_search/src=http%3A%2F%%2F%2F10%2F1100%2F16sucai_p1004049_098.JPG&refer=http%3A%2F%&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627526069&t=254d86f033e2279617c40b2035e57849","/image_search/src=http%3A%2F%%2Felement_origin_min_pic%2F16%2F10%2F09%2F0257f936320f509.jpg%21%2Ffw%2F700%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627526146&t=d429d67bd3e56f8f7ff772debe79aff6","/image_search/src=http%3A%2F%%2F10%2F615d7753b15ec03a1072d375_1024.jpg&refer=http%3A%2F%&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664502719&t=37790778733d4de05824630bc34b65d1"]let img = document.getElementById("img"); //img标签let pret = document.getElementById("pret"); //上一个按钮domlet next = document.getElementById("next"); //下一个按钮domlet text = document.getElementById("text"); //文字显示var i = 0;defaultImg(imgArr, img, i, text);next.addEventListener("click", () => {nextFn(imgArr, img)})pret.addEventListener("click", () => {prextFn(imgArr, img)})function defaultImg(arr, img, index, text) { //默认的图片 arr-图片数组 。img是图片dom，index-是下标 text-是文字标签domimg.src = arr[index];text.innerText = `一共是${arr.length}张，当前是第${index + 1}张`}function prextFn(arr) { //上一张if (i == 0) {i = arr.length - 1;img.src = arr[arr.length - 1];//加上这个就是到了第一张，再次点击就回到最后一张，不想要可以注释text.innerText = `一共是${arr.length}张，当前是第${i + 1}张`alert("已经是第一张了，在点击就会回到最后一张"); //如果不想这样可以把这三行注释掉return}i--;img.src = imgArr[i];text.innerText = `一共是${arr.length}张，当前是第${i + 1}张`}function nextFn(arr) { //下一张if (i == arr.length - 1) {i = 0;img.src = arr[0]; //加上这个就是到了最后一张，再次点击就回到第一张，不想要可以注释text.innerText = `一共是${arr.length}张，当前是第${i + 1}张`alert("已经是最后一张了，在点击就会回到第一张"); //如果不想这样可以把这三行注释掉return}i++;img.src = arr[i];text.innerText = `一共是${arr.length}张，当前是第${i + 1}张`}</script></html>
