服务器时连续请求图片，让他能形成动画的效果，但是只显示了最后一张
怎么办才能让他将所有图片的显示？
本地测试看应该没有问题。通过服务器来测试时间间隔太短了，如果图片大加载需要时间的，所以最后的效果就是显示最后一张图片了。。
不过可以优化，先用Image对象缓存图片到客户端，当所有img缓存完毕后再调用show_video
有帮助麻烦点个采纳【右上角】，谢谢~~有需要写缓存代码可以继续问~
这样不行，服务器反应没那么快的，会把服务弄挂了。
你可以创建一个对应img的计数，对所有 img 数组中的图片进行js加载，并将加载完的图片放到新数组中，当两个数组数量相等时，你再执行你这个js
el = createElement('img')
el.src = img[0]
el.onload = function(){}
说明，time_num一直为最后一个或者，定时器只运行了一遍。你time_num的声明是写在外面了吗。我这里有个类似的只不过不是自动播放
<!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 id="tit">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 = ["https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile03.16sucai.com%2F2016%2F10%2F1100%2F16sucai_p20161004049_098.JPG&refer=http%3A%2F%2Ffile03.16sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627526069&t=254d86f033e2279617c40b2035e57849",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.soutu123.com%2Felement_origin_min_pic%2F16%2F10%2F09%2F0257f936320f509.jpg%21%2Ffw%2F700%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%2Fpic.soutu123.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627526146&t=d429d67bd3e56f8f7ff772debe79aff6"
]
let img = document.getElementById("img"); //img标签
let pret = document.getElementById("pret"); //上一个按钮dom
let next = document.getElementById("next"); //下一个按钮dom
let 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-是文字标签dom
img.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}张`
}
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>
<div id="dvLoading">图片加载中...</div>
<img id="pic_video" style="height:300px" alt=""/>
<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
<script>
/**
* 缓存图片
* @param imgs ：图片路径数组
* @param callback ：全部加载完毕后的回调函数
*/
function cacheImages(imgs, callback) {
var loaded = 0, num = imgs.length;
for (var src of imgs) {
console.log(src)
var img = new Image();
img.onload = img.onerror = function () {//添加图片onload【成功加载】和onerror【加载失败事件】
loaded++;//
if (loaded >= num) {//全部加载完毕执行回调
if (typeof callback == 'function') callback();
}
}
img.src = src ;
}
}
function show_video(img) {
var time_num = 0, isgoing = true, num = img.length;
var clock = setInterval(function () {
$('#pic_video').attr('src', img[time_num])
time_num++;
if (time_num > num) {
time_num = 0;
isgoing = false;
}
if (!isgoing) {
clearInterval(clock);
alert('播放完毕！')
//show_jiantou();//
}
}, 40);
}
var imgs = ['1.jpg', '2.jpg', '3.jpg', '4.jpg'];
cacheImages(imgs, function () {
$('#dvLoading').hide();
show_video(imgs)
})
</script>