Given your current code, you need to apply some formatting via CSS to manipulate the look of the elements until you achieve what you want.

• Base Preparation

  First, we use some CSS properties to set a basic look at the elements we want to pass to circles:

  /* retirar aspeto de link */
  text-decoration: none;
  outline:0 none;
  
  /* passar link para bloco de linha, esconder texto dentro do mesmo */
  display: inline-block;
  text-indent:-9999px;
  overflow:hidden;
  
  /* definir um tamanho */
  width:14px;
  height:14px;
  
  /* aplicar cores */
  border: 1px solid #ccc;
  background-color:#fff;
  

• Pass square elements to round

  We can use the property border-radius to round the corners of a element, where from a given value we are effectively leaving the element circular.

  Demo site: link

  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  

  50% allows to say: round the corners up to half the width of each side, therefore, a square is a circle.

• Shading in element background

  We can use the box-shadow property to apply a shadow on an element . The position of the shadow against the element, as well as whether it is outside or inside the element are some of the options available.

  Demo site: link

  For the example below I used:

  -webkit-box-shadow: inset 0px -2px 4px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: inset 0px -2px 4px 0px rgba(0,0,0,0.75);
  box-shadow: inset 0px -2px 4px 0px rgba(0,0,0,0.75);
  

  - inset to stay centered.
  - 0px -2px to stay horizontally to the center and vertically to emerge from below. - 4px 0px for blur effect with 4 pixels without propagation
  - rgba(0,0,0,0.75) black color with 25% transparency p>

What we saw above was the passage of your links that were the rectangles for little circles:

• Before

  

• Then

Example

I made an example and I used to optimize part of your code, but you should make the necessary adjustments if it is not 100% as intended.

Example also available on JSFiddle .

$(document).ready(function() {

  $(".tab_content").hide();

  $(".tabs li:first").addClass("active").show();
  $(".tab_content:first").show();

  $("ul.tabs li").click(function(e) {
    e.preventDefault();

    var $this = $(this);

    $(".tabs .active").removeClass("active");
    $(".tab_content").hide();

    var activeTab = $this.addClass("active").find("a").attr("href");
    $(activeTab).fadeIn();
  });
});

.container {
  width: 500px;
  margin: 10px auto;
}
ul.tabs,
ul.tabs li {
  margin: 0;
  padding: 0;
}
ul.tabs {
  display: block;
  list-style: none;
  height: 32px;
  border: 1px solid #999;
  background-color: #f2f2f2;
}
ul.tabs li {
  display: inline-block;
  height: 32px;
  width: 32px;
  line-height: 32px;
  text-align: center;
}
ul.tabs li a {
  text-decoration: none;
  outline: 0 none;
  display: inline-block;
  text-indent: -9999px;
  overflow: hidden;
  width: 14px;
  height: 14px;
  border: 1px solid #ccc;
  background-color: #fff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
ul.tabs a:hover,
ul.tabs .active > a {
  background: red;
  border-color: transparent;
  -webkit-box-shadow: inset 0px -2px 4px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: inset 0px -2px 4px 0px rgba(0, 0, 0, 0.75);
  box-shadow: inset 0px -2px 4px 0px rgba(0, 0, 0, 0.75);
}
.tab_container {
  border: 1px solid #999;
  border-top: none;
  background: #fff;
  -webkit-border-radius: 0 0 5px 5px;
  -moz-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
}
.tab_content {
  padding: 20px;
  font-size: 1.2em;
}
.tab_content h2 {
  font-weight: normal;
  padding-bottom: 10px;
  border-bottom: 1px dashed #ddd;
  font-size: 1.8em;
}
.tab_content h3 a {
  color: #254588;
}
.tab_content img {
  float: left;
  margin: 0 20px 20px 0;
  border: 1px solid #ddd;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><divclass="container">
  <h1>teste</h1>

  <ul class="tabs">
    <li><a href="#tab1">1</a>

    </li>
    <li><a href="#tab2">2</a>

    </li>
    <li><a href="#tab3">3</a>

    </li>
    <li><a href="#tab4">4</a>

    </li>
    <li><a href="#tab5">5</a>

    </li>
  </ul>
  <div class="tab_container">
    <div id="tab1" class="tab_content">
      Conteúdo da tab 1
    </div>
    <div id="tab2" class="tab_content">
      Conteúdo da tab 2
    </div>
    <div id="tab3" class="tab_content">
      Conteúdo da tab 3
    </div>
    <div id="tab4" class="tab_content">
      Conteúdo da tab 4
    </div>
    <div id="tab5" class="tab_content">
      Conteúdo da tab 5
    </div>
  </div>
</div>

I have edited your original code and changes can be seen by the comments of / * MODIFIED * / ;

link

The main change was made in the javascript, which in the case is the following excerpt:

/* MODIFICADO */
//Alteramos a tab
window.setInterval(function() {
    var index = $('.tabs > .active').next('li').index() +1;
    if (index == 0) {
       $("a[href=#tab1]").trigger('click');
    } else {
        $("a[href=#tab"+index+"]").trigger("click");
    }
}, 2000);
/* FIM MODIFICADO */

In an interval of 2 seconds, we check which is the active tab. So you're going to ask me, what does this excerpt mean: if (index == 0) { ?

Running this part: $('.tabs > .active').next('li').index() it will always get the next index of a li and when it does not exist next, it will return -1. That in the case added to the +1, will be 0; So when the index is 0, we will know that it is the first tab that should be displayed again ... otherwise it will continue activating the other tabs.

In layout, I removed the names of the html tabs (Heading 1, Heading 2 ...) and added the following CSS to show small circles in the headers of the tabs:

/* MODIFICADO */
/* Adicionamos o círculo no link da tab*/
ul.tabs li a:after {
    content: 'CF';
} 
/* FIM MODIFICADO */