如何解决如何使用自己的照片实现无限滚动效果
我有一个无限滚动项目,我真的不想使用像 picsum 和 unsplash 这样的 API 来生成随机照片。我想使用来自互联网上某处或本地保存的我自己的照片。我按照教程使我的照片库无限滚动,但我不明白如何将 picsum url 更改为其他内容。最好是本地保存的照片。例如,我可以用 1 到 20 的数字命名它们,但是我该如何编写“获取”部分?
const getimages = async function() {
const getimageRes = await fetch(
`https://picsum.photos/v2/list?page=${page}&limit=8`
);
const data = await getimageRes.json();
const loading = document.querySelector(".loading");
for (let i = 0; i < 8; i++) {
let ele = document.createElement("img");
ele.setAttribute("src",data[i].download_url);
ele.setAttribute("height","384");
ele.setAttribute("width","512");
document.getElementById("container").appendChild(ele);
}
page++;
loading.classList.remove("show");
};
解决方法
const imageSources = [ // Put your image sources in this list
'./images/1.jpg','./images/2.jpg','./images/3.jpg','./images/4.jpg','./images/5.jpg'
]
for (let i = 0; i < 5; i++) { // Change this 5 to however many images you have (or use for ... in)
let ele = document.createElement("img");
ele.setAttribute("src",imageSources[i]);
ele.setAttribute("height","384");
ele.setAttribute("width","512");
document.getElementById("container").appendChild(ele);
}
page++;
loading.classList.remove("show");
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。