以循环方式使用 jquery 更改多个图像 src

Question

我的 html 文件中有 3 个 img 标签。我想通过从存储 9 个图像 src link.

的数组中单击按钮来更改所有 3 个 img 的 src

因此，当页面第一次加载时，它将显示前 3 张图像 [0,1,2]。然后在每个 next-btn 单击它会将图像更改为下一个 3 [3,4,5]，[6,7,8]。当点击 prev-btn 时，它将返回到 3 张图片。

请帮助我。请建议我有没有其他更好的方法？

这是我到目前为止尝试过的方法：

const $img1 = $("#img1")
const $img2 = $("#img2")
const $img3 = $("#img3")
const $nextBtn = $("#next-btn")
const $prevBtn = $("#prev-btn")


$.get("https://someApiLink.com/all.json", function (characters) {
    const charactersList = []
    for (let i=0; i<characters.length; i++) {
        // here casts is another array to match predefined characters with the 
        // character from the api
        if (casts.includes(characters[i].name)) {
            charactersList.push(characters[i])
        }
    } 
    $img1.attr("src", charactersList[0].image)
    $img2.attr("src", charactersList[1].image)
    $img3.attr("src", charactersList[2].image)

    // it will only switch back and forth 2 images on the first img tag     
    $nextBtn.on("click", function () {
        const src = ($img1.attr("src") === charactersList[0].image)
        ? charactersList[1].image
        : charactersList[0].image;
        $img1.attr("src", src)
    })
})

Answer 1

您可以存储一种“页码”，例如 page 以跟踪它们在哪个页面上，并且 increase/decrease 每次“按下”它。

let page = 0;
const imgInSet = 3;

const reloadImages = ()=>{
    const imgSet = Math.abs(page); // we get abs if someone do more previous than nexts
    $img1.attr("src", characterList[imgSet*imgInSet].image); // get first image
    $img2.attr("src", characterList[imgSet*imgInSet+1].image); // get second image
    $img3.attr("src", characterList[imgSet*imgInSet+2].image); // get third image
}

$nextBtn.on("click", ()=>reloadImages(++page)); // do reloadImages after adding 1 to roll

$prevBtn.on("click", ()=>reloadImages(--page);) // do reloadImages after removing 1 from roll

您可以添加一个 numberOfPages 值来限制可用页面的数量：

let page = 0;
const imgInSet = 3;
const numberOfPages = Math.floor(characterList.length/3);

const reloadImages = ()=>{
    const imgSet = Math.abs(page)%numberOfPages; // we get abs if someone do more previous than nexts
    $img1.attr("src", characterList[imgSet*imgInSet].image); // get first image
    $img2.attr("src", characterList[imgSet*imgInSet+1].image); // get second image
    $img3.attr("src", characterList[imgSet*imgInSet+2].image); // get third image
}

这两个交换 previous/next 按钮，当它们通过这样做得到负数时：

let page = 0;
const imgInSet = 3;
const numberOfPages = Math.floor(characterList.length/3);

const reloadImages = ()=>{
    const imgSet = page<0?numberOfPages+page%imgInSet:page)%numOfPages;
    $img1.attr("src", characterList[imgSet*imgInSet].image);
    $img2.attr("src", characterList[imgSet*imgInSet+1].image);
    $img3.attr("src", characterList[imgSet*imgInSet+2].image);
}

$nextBtn.on("click", ()=>reloadImages(++page));

$prevBtn.on("click", ()=>reloadImages(--page);)

此答案适用于更“通用的解决方案”，在这种解决方案中，您不需要对需要循环使用的每个新 img 进行太多更改。

Answer 2

你需要两件事：

根据索引设置图像的函数。
用于跟踪 charactersList 从何处开始计数的索引。

使用该功能，您可以根据带有 +1 和 +2 索引的起点渲染图像。所以假设你从 2 开始，那么 3 和 4 也会被渲染。

nextBtn 应将索引递增 +3，以便渲染接下来的 3 张图像。 prevBtn 应将索引递减 -3，以便渲染前 3 个图像。

const $img1 = $("#img1")
const $img2 = $("#img2")
const $img3 = $("#img3")
const $nextBtn = $("#next-btn")
const $prevBtn = $("#prev-btn")

$.get("https://someApiLink.com/all.json", function (characters) {
    const charactersList = []
    for (let i=0; i<characters.length; i++) {
        if (casts.includes(characters[i].name)) {
            charactersList.push(characters[i])
        }
    }

    // Index to start counting from.
    let characterIndex = 0;

    /**
     * Sets three images based in the given index.
     * Indexes will be counted upwards starting with the index.
     * @param {number} index
     */
    const setThreeImageFromIndex = index => {
        $img1.attr("src", charactersList[index].image)
        $img2.attr("src", charactersList[index + 1].image)
        $img3.attr("src", charactersList[index + 2].image)
    });

    // Set images for the first time.
    setThreeImageFromIndex(characterIndex);
    
    // Go to next 3.
    $nextBtn.on("click", function () {
       // Don't go over the length of the characterList.
       if (characterIndex + 3 < charactersList.length) {
           characterIndex += 3;
           setThreeImageFromIndex(characterIndex);
       }
    });

    // Go to previous 3.
    $prevBtn.on("click", function () {
       // Don't go below 0.
       if (characterIndex - 3 >= 0) {
           characterIndex -= 3;
           setThreeImageFromIndex(characterIndex);
       }
    });
})

以循环方式使用 jquery 更改多个图像 src

Change multiple image src with jquery in a circular fashion

html

javascript

arrays

jquery

onclick