JSFiddle - React, Tailwind, and code Playground

angular timeout single image change

by Andrew Pougher

HTML

<div  ng-app ng-controller="cntcontrol">
{{counter}} / {{imttl}} / {{mybgimage}}
    <button ng-click="stop()">Stop</button>    
</div>

JavaScript

function cntcontrol($scope,$timeout) {
$scope.pics =  ["bo-boxes1.jpg","bo-boxes2.jpg","bo-boxes3.jpg","bo-boxes4.jpg","bo-boxes5.jpg","bo-boxes6.jpg", "bo-boxes7.jpg"] ;
    $scope.counter = 0;
        $scope.imttl = $scope.pics.length;
          console.log($scope.imttl);
    $scope.onTimeout = function(){
        $scope.counter++;
        mytimeout = $timeout($scope.onTimeout,100);
       
        if($scope.counter ===50){$scope.counter = 0; $scope.imttl--;}
        if($scope.imttl === 0){$scope.imttl = $scope.pics.length};
          $scope.mybgimage = $scope.pics[$scope.imttl-1];
    }
    var mytimeout = $timeout($scope.onTimeout,100);
    
    $scope.stop = function(){
        $timeout.cancel(mytimeout);
    }
            
}