Configure the index of the image that will receive the style

I have a group of imagens within a div :

<div class="boxSlide">
   <img src="_imgs/_slideShow/1.png" />
   <img src="_imgs/_slideShow/2.png" />
   <img src="_imgs/_slideShow/3.png" />
</div>

I would like to know the index of each to use in função below:

$(document).ready(function(e) {

  $("div.slideShow div.contador span.contaSlide").click(function() {
      index = $(this).index();
      $("div.slideShow div.boxSlide img").css("opacity",0);
      $("div.slideShow div.boxSlide img").prop("index",index).css("opacity",1);
  });

});

But it does not work. I've tried it as below too but the result is the same.

$("div.slideShow div.boxSlide img").val(index).css("opacity",1);

It seems like this part does not indicate which figura should receive style

.prop("index",index)

Here's HTML

<div class="slideShow">
  <div class="boxSlide">
     <img class="aberturaSelect" src="_imgs/_slideShow/1.png" />
     <img class="aberturaSelect" src="_imgs/_slideShow/2.png" />
     <img class="aberturaSelect" src="_imgs/_slideShow/3.png" />
     <div class="anterior">
        <span class="setaSpan"><</span>
        <span class="boxSpan"></span>
     </div>
     <div class="proximo">
        <span class="setaSpan">></span>
        <span class="boxSpan"></span>
      </div>
  </div>
  <div class="contador">
     <span class="contaSlide">1</span>
     <span class="contaSlide">2</span>
     <span class="contaSlide">3</span>
  </div>
</div>