setTimeoutを使用した自動画像切り替えについて

普通にsetIntervalだけで解決可能。

(function(){
  let i = 0;
  let images = [
    'img/IMG_0193_preview.jpg',
    'img/IMG_0958.jpg'
  ];
   let pid = setInterval(function(){
      $('#back_img').animate({backgroundImage:'url(' + images[i % images.length] + ')'},1000);
      if(i++ > 5){ clearInterval(pid); }
   }, 1000);
})();

期待される動作は、画面reload後 6秒後に最初の画像が表示されてそのあと１秒間隔で別の画像に切り替わるというのを繰り返すということでしょうか?

画像が2つだけなら、以下のような感じですね。

var galary = [
  'url(http://d1f5hsy4d47upe.cloudfront.net/a3/a3827696f0496bb297738a9ee6a27902_t.jpeg)',
  'url(http://01.gatag.net/img/201505/25l/gatag-00005175.jpg)'
];
var index = 0;

setInterval(function() {
  $('#back_img').css('background-image', galary[index]);
  setTimeout(function() {
    index = (index === 0) ? 1 : 0;
    $('#back_img').animate({
      backgroundImage: galary[index]
    }, 1000);
  }, 1000);
}, 3000);

【動作サンプル】
https://jsfiddle.net/euledge/xu8p2dcm/

動かない理由ですが、以下のように書いた場合一見、上から順に1秒ごとに$('#back_img').animate()が動くように思いますが、実際には非同期で処理されるため1秒後に6つのanimete()が呼ばれることにあります。

setTimeout(function() {
  $('#back_img').animate({backgroundImage: イメージ1}, 1000);
}, 1000);
setTimeout(function() {
  $('#back_img').animate({backgroundImage: イメージ2}, 1000);
}, 1000);
setTimeout(function() {
  $('#back_img').animate({backgroundImage: イメージ1}, 1000);
}, 1000);
setTimeout(function() {
  $('#back_img').animate({backgroundImage: イメージ2}, 1000);
}, 1000);
setTimeout(function() {
  $('#back_img').animate({backgroundImage: イメージ1}, 1000);
}, 1000);
setTimeout(function() {
  $('#back_img').animate({backgroundImage: イメージ2}, 1000);
}, 1000);