Skip to content Skip to sidebar Skip to footer
Home / Angularjs / Javascript / Jquery

Angularjs: Change Image When Page Refresh. Otherwise (if Not Refreshed) Want To Change Automatically In 5 Sec

Post a Comment
Here am created one page with Image changing while the page refresh. from this SO question Change Image when Page Refresh in angularJS. Now i need to change the image automatically

Solution 1:

you can use timeout function to show the image after 5 seconds.

init();
functioninit(){
  for (var i=0;i<=$scope.data.length-1;i++) {

      setTime(i)
  }
}
functionsetTime(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();
 
  functioninit(){
    for (var i=0;i<=$scope.data.length-1;i++) {
      
        setTime(i)
    }
  }
  functionsetTime(i){
    $timeout(function(){
      $scope.image = $scope.data[i].path; 
      if (i == $scope.data.length-1) { 
          init();
      }
    }, (5000 * i));
  }
 
 $scope.clear = function(){
   debuggerlocalStorage.removeItem("uIDs");
 }
 
})
<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-app="app"ng-controller="ctrl">
       {{image}}
      <buttonng-click="clear()">clear</button></div>

Solution 2:

If I understand your question correctly then you are looking for this,,

Try this

<!DOCTYPE html><html><head><scriptdata-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><scripttype="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();

			functionsetImage(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)
			};

			functiongetImage(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><divng-app="app"ng-controller="ctrl">
		{{image}}
		<buttonng-click="clear()">clear</button></div></body></html>

Here is the working fiddle

Post a Comment for "Angularjs: Change Image When Page Refresh. Otherwise (if Not Refreshed) Want To Change Automatically In 5 Sec"