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

Posted 2023-05-09

【中文标题】以循环方式使用jquery更改多个图像src

【英文标题】：Change multiple image src with jquery in a circular fashion

【发布时间】：2021-10-09 00:59:28

【问题描述】：

我的 html 文件中有 3 个 img 标签。我想通过单击存储 9 个图像 src 链接的数组中的按钮来更改所有 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)
    )
)

【参考方案1】：

你需要两件事：

一个基于索引设置图像的函数。 一个索引，用于跟踪 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);
       
    );
)

【讨论】：

非常感谢。它有帮助。

【参考方案2】：

您可以存储一种“页码”，例如 page，以跟踪它们所在的页面，并在每次“按下”时增加/减少它。

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

当它们到达负数时，这两个交换上一个/下一个按钮：

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 进行太多更改。