javascript - 在 jQuery 中循环浏览图像

Question

抱歉，我是 jQuery 编程新手。我有一个包含一些图像的页面，我只想将它们圈起来。

我的意思是，我想移动第一张图像代替第二张图像，第二张图像代替第三张图像，依此类推，直到最后一张图像被移动到第一个位置。每次我按下按钮时都会发生这种情况。

在 Javascript 中，这非常简单，例如:

V = document.getElementsByTagName("img");
K = V[V.length - 1].src
for (i = V.length - 1; i > 1; i--)
{
    V[i].src = V[i - 1].src;
}
v[0].src = K;

现在我正在尝试在 jQuery 中实现同样的转变，我想知道是否有一些简单的技巧可以使用。有人可以帮助我吗？

Answer 1

实际上使用普通的 javascript 它比你写的还要容易(不需要 jquery，它增加了沉重的负载)。

const images = document.getElementsByTagName("img");
let nextImageSrc = images[images.length - 1].src;

Array.from(images).forEach((img) => {
   const tmp = img.src;
   img.src = nextImageSrc;
   nextImageSrc = tmp;
});

<小时/>

如果您确实使用jquery，您也可以做同样的事情:

const $images = $("img");
let nextImageSrc = $images.last().attr('src');

$images.each((i, img) => {
   const tmp = img.src;
   img.src = nextImageSrc;
   nextImageSrc = tmp;
});