Question

在页面刷新时创建了一个图像更改的页面。从这个问题Change Image when Page Refresh in 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

 <body>
   <div ng-app="app" ng-controller="ctrl">
     {{image}}
   <button ng-click="clear()">clear</button>
</div>
  </body>

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

Answer 1

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

试试这个

<!DOCTYPE html>
<html>

<head>
	<script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
	<script type="text/javascript">
		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"
			}]


			var k = Math.floor(Math.random() * 4) + 1;

			$scope.image = $scope.data[k-1].path;
			var obj = $scope.data[k];
			setImage();

			function setImage(argument) {
				
				$timeout(function () {
					if (obj.path) {
						if (obj.id >$scope.data.length) {
							$scope.image = getImage(obj.id);
							obj.id = 1;
						}else{
							$scope.image = getImage(obj.id);
							obj.id ++;
						}
					}else{
						$scope.image = "invalid id";
					}

					 setImage();
					}, 5000)
			};

			function getImage(id) {
				for (var i = $scope.data.length - 1; i >= 0; i--) {
					if ($scope.data[i].id == id) {
						return $scope.data[i].path;
					}
				}
			}


		})
	</script>
</head>

<body>
	<div ng-app="app" ng-controller="ctrl">
		{{image}}
		<button ng-click="clear()">clear</button>
	</div>
</body>

</html>

这是工作fiddle

Answer 2

你可以使用超时功能在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));
}

＆＃13;

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");
 }
 
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

     <div ng-app="app" ng-controller="ctrl">
       {{image}}
      <button ng-click="clear()">clear</button>
    </div>

＆＃13;

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

2 个答案: