时间戳

首页 > 解决方案 > 在对象js中存储的1个位置显示一系列图像

javascript - 在对象js中存储的1个位置显示一系列图像

问题描述

我想要一个图像对象，然后遍历它们以显示每个图像，每个图像之间有一定的时间间隔。

将图像存储在对象中：

var images = [
  { name: 'image1', image: 'image1.jpg' }, 
  { name: 'image2', image: 'image2.jpg' }, 
  { name: 'image3', image: 'image3.jpg' }
]

创建一个循环来遍历对象中的每个图像，并且每次循环遍历它都会将 div 的源更改为图像。

最后，我希望图像停止循环单击按钮的循环。

到目前为止，我已经设置了上述对象以及一个包含计数器的函数，该计数器循环遍历对象中的项目。

 var add = (function() {
        var counter = images.length - 1;
        return function() {
            if(counter === images.length - 1) {
                counter = 0;
            } else {
                counter+=1;
            }
            return counter;
        }
    })();

然后我使用 setInterval 每 0.5 秒更改一次 src。

setInterval(
    function() {
     var imageDiv = document.getElementById('image');

     var tester = images[add()];

     imageDiv.src = tester.image;

    }
, 500);

以上似乎控制台记录了正确的图像，但它没有更改源并每 0.5 秒显示一次图像之一。

任何人都可以提供一个指针来帮助我更新 src 吗？

谢谢

标签： javascriptobjectsequence

解决方案

这里不需要循环，您可以像我对imgIndex变量所做的那样手动跟踪当前图像，并在每次changeImg()调用函数时递增它。在它到达最后一张图像后，我将该变量设置回 0，因此它将在之后重复图像顺序。

在 setInterval 函数（第二个参数）中，您可以设置每个图像应显示的时间。

您无需担心图像会被多次加载，因为我们只需替换src浏览器将处理它的属性。

还有其他问题吗？

images = [
  {"name":"img1", "src":"https://phinest.com/wp-content/uploads/2017/02/Maya_Beano_Phinest_4-800x800.jpg"},
  {"name":"img2", "src":"https://www.pixel-creation.com/wp-content/uploads/3d-nature-wallpapers-wallpaper-cave-800x800.jpg"},
  {"name":"img3", "src":"https://img00.deviantart.net/5fdc/i/2009/162/9/0/nature_stock_14_by_dezzan_stock.jpg"},
  {"name":"img4", "src":"https://www.secretescapes.com/inlombardia/img/content/link--nature.jpg"},
  {"name":"img5", "src":"https://www.mappingmegan.com/wp-content/uploads/2017/04/sunset-2177324_1920-001.jpg"}
];
imgIndex = 0;

function changeImg(){
  document.getElementById("slideshow").src = images[imgIndex].src;
  if(images.length > imgIndex+1){
    imgIndex++;
  } else {
    imgIndex = 0;
  }
}

changeImg();
setInterval(changeImg, 2000)
<img id="slideshow" src=""/>

推荐阅读