Thumb rotator by IMG URL文件夹在jQuery中的位置

Question

如何通过jQuery从IMG获取文件夹位置以及允许设置最大图像数可以在文件夹example https://cdn1.example.com/thumbs/23432/0.jpg =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>

​