angularJS：页面刷新时更改图像。 否则（如果没有刷新）想要在5秒内自动更改

这里创建了一个页面， 页面刷新时 图像更改 。 从这个SO问题在angularJS中的页面刷新时更改图像 。 现在我需要在5秒后自动 更改图像 ，这意味着页面刷新或图像不想更改。 如何通过实现以下代码来解决此问题。 请帮我…

if(!localStorage.getItem("uID")){ var s = {"id":1}; localStorage.setItem("uID", JSON.stringify(s)) } $scope.data = [{ "id": 1, "path": "Content/Banner/banner.jpg" }, { "id": 2, "path": "Content/Banner/banner1.jpg" }, { "id": 3, "path": "Content/Banner/banner2.jpg" }, { "id": 4, "path": "Content/Banner/banner3.jpg" }] var item = localStorage.getItem("uID") item = JSON.parse(item); var obj = $scope.data.find(function(o){ return o.id === item.id }) // add this lines $scope.image =(obj)? obj.path : "invalid id"; if(item.id == 4){ localStorage.removeItem("uIDs"); item.id = 0; } item.id = item.id +1 ; 

这是我的Html

   
 {{image}} clear 
  

这是工作的plunker https://plnkr.co/edit/5ONenuXOwi54b2V2MXMW?p=preview

Answer 1

您可以使用超时function在5秒后显示图像。

 init(); function init(){ for (var i=0;i<=$scope.data.length-1;i++) { setTime(i) } } function setTime(i){ $timeout(function(){ $scope.image = $scope.data[i].path; if (i == $scope.data.length-1) { init() } }, (5000 * i)); } 

 angular.module("app",[]) .controller("ctrl",function($scope,$timeout){ $scope.data = [{ "id": 1, "path": "Content/Banner/banner.jpg" }, { "id": 2, "path": "Content/Banner/banner1.jpg" }, { "id": 3, "path": "Content/Banner/banner2.jpg" }, { "id": 4, "path": "Content/Banner/banner3.jpg" }] init(); function init(){ for (var i=0;i<=$scope.data.length-1;i++) { setTime(i) } } function setTime(i){ $timeout(function(){ $scope.image = $scope.data[i].path; if (i == $scope.data.length-1) { init(); } }, (5000 * i)); } $scope.clear = function(){ debugger localStorage.removeItem("uIDs"); } }) 

  
 {{image}} clear  

Answer 2

如果我正确理解你的问题那么你正在寻找这个，

试试这个

        
 {{image}} clear