<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

<img id="resim"
src="">

<br><br><br>
<button type="button" id="cevir">ÇEVİR</button>

var arr = ['https://test.com/on.png', 'https://test.com/sag.png', 'https://test.com/sol.png', 'https://test.com/arka.png'];
document.getElementById("resim").src = arr[0];

$("#cevir").click(function(){
  var resim = document.getElementById("resim").src;
  
  switch(resim) {
    case arr[0]:
      document.getElementById("resim").src = arr[1];
      break;
    case arr[1]:
      document.getElementById("resim").src = arr[2];
      break;
    case arr[2]:
      document.getElementById("resim").src = arr[3];
      break;
    case arr[3]:
      document.getElementById("resim").src = arr[0];
      break;
    default:
      document.getElementById("resim").src = arr[0];
  }
  
});