jQuery中IMG URL文件夹位置的拇指旋转器

Question

如何通过 jQuery 从 IMG URL 示例 https://cdn1.example.com/thumbs/23432/0.jpg 获取文件夹位置并允许设置最大图像可以在文件夹示例 Total = 5 中找到（图像可以在文件夹 URL 中找到）。

从 IMG URL 示例生成图像 URL 之后的脚本

https://cdn1.example.com/thumbs/23432/0.jpg
https://cdn1.example.com/thumbs/23432/1.jpg
https://cdn1.example.com/thumbs/23432/2.jpg
https://cdn1.example.com/thumbs/23432/3.jpg
https://cdn1.example.com/thumbs/23432/4.jpg

当一个人用鼠标悬停“链接”时，图像旋转器以 IMG 0.jpg（列表中的第一个图像）开始并以 4.jpg 结束

当该人从a href 中移除鼠标以显示来自<img src="(original link)" /> 的原始图像。

我尝试了一些脚本，但其中大多数都需要手动添加链接我希望我能找到一个以这种方式工作的脚本，但我发现大多数拇指旋转器存在一些问题，当它们开始旋转某些图像时没有完全旋转已加载，我希望是否有办法在开始旋转之前先加载图像。

HTML 示例：

<a href="/" class="video"><img src="https://cdn1.example.com/thumbs/23432/2.jpg" /></a>

Answer 1

var hoverstatus = false;
var imgArr = ["https://picsum.photos/200/300", "https://picsum.photos/id/237/200/300", "https://picsum.photos/seed/picsum/200/300"];

function imagehover() {
  hoverstatus = true;
  for (var i = 0; i < imgArr.length; i++) {
    var time = 1000 * (i + 1);
    changeImage(i, time);
  }
}

function changeImage(i, time) {
  if (hoverstatus == false) {
    imagehoverout();
    return;
  }
  setTimeout(function() {
    console.log(i);
    jQuery('.video img').attr('src', imgArr[i]);
  }, time);
}

function imagehoverout() {
  hoverstatus = false;
  $('.video img').attr('src', 'https://picsum.photos/200/300.jpg');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="/" class="video"><img onmouseover="imagehover()" onmouseout="imagehoverout()" src="https://picsum.photos/200/300.jpg" /></a>