SlideShow jQuery

Fala pessoal, tudo bem?

recentemente eu estive iniciando na linguagem jQuery e, após adquirir alguns conhecimentos básicos, resolvi tentar criar um slideshow por conta própria, para consolidar o pouco que aprendi até agora. Ocorre que eu "consegui" criar o SlideShow mas ele esta apresentando um comportamento estranho que não consigo revolver. Segue o código:

CSS

.off { display: none; }

.on { display: block; width: 600px; height: 300px; box-shadow: 2px 2px 4px black; }

HTML

 <figure>

 <img src="photos/ex1.png"/>

 <img src="photos/ex2.png"/>

 <img src="photos/ex3.png"/>

 </figure>

Jquery

 $('figure img').addClass("off");

 var now = 1;

 setInterval(function(){

 if(now >= total){

 now = 1;

 }

 $('figure img').addClass("off");

 var total = $('figure img').length;

 var last = now - 1;

 $('figure img:nth-child('+last+')').removeClass("on");

 $('figure img:nth-child('+last+')').removeClass("on");

 $('figure img').addClass("off");

 $('figure img:nth-child('+now+')').addClass("on");

 $('figure img:nth-child('+now+')').removeClass("off");

 now = now + 1;

 }, 6000);

O que esta acontecendo é que quando abro a página, ele funciona corretamente e exibe as três fotos, uma de cada vez(exibe uma, ela some rapidamente e aparece a outra). Depois que ele exibe todas as imagens pela primeira fez ele começa a falhar e ao invés de exibir uma imagem de cada vez ele começa a mostrar todas as três, uma posicionada acima da outra. Como posso fazer para que ele funcione corretamente?