Javascript 需要知道如何使用此滑块库中的托管图像列表替换Flickr库

如果我遗漏了什么，我很抱歉。我想使用这个代码笔示例作为范围滑块驱动图像库的起点。现在它正在从Flickr中提取图像，但我想使用我自己的托管图像。我知道HTML和CSS，但不懂Javascript。如果有人能在这方面帮助我或提出不同的方法，我将不胜感激。这是代码笔的链接-

HTML

<section class="timemachine">
<form action="">
  <input type="range" />
</form>
</section>

Javascript

<script>

var images;
function jsonFlickrApi(data) {
  console.log(data);
  images = data.photos.photo.map(function(photo){return photo.url_z});
  image_elements = images.map(function(mg, i) {
    var img = document.createElement('img');
    img.src = mg;
    var numb = document.createElement('h2');
    numb.textContent = i+1;
    var fig = document.createElement('figure');
    fig.appendChild(img);
    fig.appendChild(numb);
    document.querySelector('section').appendChild(fig); 
    return fig;
  });
   var slider = document.querySelector('input');
  slider.min = 0;
  slider.max = slider.value = images.length - 1;
  image_elements[slider.max].style.opacity = 1;
  // slider.step = 0.01;
  slider.addEventListener('input', function(e) {
  // console.log(Math.floor(e.target.value));
    image_elements.forEach(function(e){e.style.opacity=0;
                                       // e.style.zIndex=-100;
                                      });
    image_elements[Math.floor(e.target.value)].style.opacity = 1;
    // image_elements[Math.floor(e.target.value)].style.zIndex=100;
   
}); 
}
 
</script>
<script src="https://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=603db98e0031fb25a3e3a6fc44502683&user_id=25053835@N03&per_page=50&format=json&extras=description,license,date_upload,date_taken,owner_name,icon_server,original_format,last_update,geo,tags,machine_tags,o_dims,views,media,path_alias,url_sq,url_t,url_s,url_q,url_m,url_n,url_z,url_c,url_l,url_o">


  


</script>

var图像；
函数jsonFlickrApi（数据）{
控制台日志（数据）；
images=data.photos.photo.map（函数（photo）{returnphoto.url_z}）；
image\u elements=images.map（函数（mg，i）{
var img=document.createElement（'img'）；
img.src=mg；
var numb=document.createElement（'h2'）；
numb.textContent=i+1；
var fig=document.createElement（'figure'）；
图3：儿童（img）；
图3：儿童（麻木）；
document.querySelector（'section'）。appendChild（图）；
返回图；
});
var slider=document.querySelector（'input'）；
slider.min=0；
slider.max=slider.value=images.length-1；
图像元素[slider.max].style.opacity=1；
//slider.step=0.01；
slider.addEventListener（'input'，函数（e）{
//log（Math.floor（例如target.value））；
image_elements.forEach（函数（e）{e.style.opacity=0；
//e.style.zIndex=-100；
});
图像元素[Math.floor（e.target.value）].style.opacity=1；
//图像元素[Math.floor（e.target.value）].style.zIndex=100；
}); 
}

数组

URL

包含托管图像的URL

正文{
保证金：0；
背景色：黑色；
}
部分{
文本对齐：居中；
}
身材{
保证金：0；
}
氢{
位置：绝对位置；
颜色：白色；
字号：5em；
字体系列：无衬线；
/*底部：0*/
/*右：40%*/
}
截面>图{
位置：绝对位置；
高度：90vh；
显示器：flex；
宽度：100vw；
证明内容：中心；
}
截面>图>img{
身高：继承；
}
截面>图{
不透明度：0；
过渡：不透明度0.5s；
}
输入{
宽度：20vw；
}

让URL=[
'https://picsum.photos/200/300?random=1',
'https://picsum.photos/200/300?random=2',
'https://picsum.photos/200/300?random=3',
'https://picsum.photos/200/300?random=4',
];
函数loadImages（）{
图像=URL；
日志（URL）；
image\u elements=images.map（函数（mg，i）{
var img=document.createElement（'img'）；
img.src=mg；
var numb=document.createElement（'h2'）；
numb.textContent=i+1；
var fig=document.createElement（'figure'）；
图3：儿童（img）；
图3：儿童（麻木）；
document.querySelector（'section'）。appendChild（图）；
返回图；
});
var slider=document.querySelector（'input'）；
slider.min=0；
slider.max=slider.value=images.length-1；
图像元素[slider.max].style.opacity=1；
//slider.step=0.01；
slider.addEventListener（'input'，函数（e）{
image_elements.forEach(
函数（e）{e.style.opacity=0；
});
图像元素[Math.floor（e.target.value）].style.opacity=1；
}); 
}
loadImages（）；

<script>

var images;
function jsonFlickrApi(data) {
  console.log(data);
  images = data.photos.photo.map(function(photo){return photo.url_z});
  image_elements = images.map(function(mg, i) {
    var img = document.createElement('img');
    img.src = mg;
    var numb = document.createElement('h2');
    numb.textContent = i+1;
    var fig = document.createElement('figure');
    fig.appendChild(img);
    fig.appendChild(numb);
    document.querySelector('section').appendChild(fig); 
    return fig;
  });
   var slider = document.querySelector('input');
  slider.min = 0;
  slider.max = slider.value = images.length - 1;
  image_elements[slider.max].style.opacity = 1;
  // slider.step = 0.01;
  slider.addEventListener('input', function(e) {
  // console.log(Math.floor(e.target.value));
    image_elements.forEach(function(e){e.style.opacity=0;
                                       // e.style.zIndex=-100;
                                      });
    image_elements[Math.floor(e.target.value)].style.opacity = 1;
    // image_elements[Math.floor(e.target.value)].style.zIndex=100;
   
}); 
}
 
</script>
<script src="https://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=603db98e0031fb25a3e3a6fc44502683&user_id=25053835@N03&per_page=50&format=json&extras=description,license,date_upload,date_taken,owner_name,icon_server,original_format,last_update,geo,tags,machine_tags,o_dims,views,media,path_alias,url_sq,url_t,url_s,url_q,url_m,url_n,url_z,url_c,url_l,url_o">


  


</script>