<ul>
<li>Demo 1</li>
<li class="aktif">Demo 2</li>
<li>Demo 3</li>
<li>Demo 4</li>
</ul>


<ul class="tab-buton clearfix">
						<li class=""><a href="#linux-host">Linux Bireysel Hosting</a></li>
						<li class="aktif"><a href="#linux-reseller">Linux Kurumsal Hosting</a></li>
						<li class=""><a href="#vps-server">VPS Server</a></li>
						<li class=""><a href="#kiralik-sunucu">Kiralık Sunucu</a></li>
					</ul>

<ul class="tab-buton clearfix">
  
  <li class="aktif">Linux Bireysel Hosting</li>
  
  <li>Linux Kurumsal Hosting</li>
  
  <li>VPS Server</li>
   
  <li>Kiralık Sunucu</li>
  
  <li>CssValley - R10</li>
 </ul>

   
  <div id="slider">
 
  </div>

ul.tab-buton{
  padding:10px;
  margin-top:20px;
  width:400px;
  list-style:none;
}
ul.tab-buton li{
  padding:10px;
  margin-bottom:3px;
  font-size:120%;
  font-family:arial;  
}


.aktif{
  background:#444;
  color:#fff;
  -webkit-transition:all .6s ease;
  -moz-transition:all .6s ease;
  -o-transition:all .6s ease;
  transition:all .6s ease
}

 
#slider{
 background:#333;
  position:absolute;
  height:10px;
  left:0px;
  top:0px;
  font-size:80%;
  font-family:arial; 
  width:0%;
  z-index:6;
}

var x=1; 
// toplam li sayısı
var adet = $("ul.tab-buton li").length;
var sure = 5000;

$("#slider").animate({width:'100%'},sure,function(){
   $(this).css({width:'0%'});
});



// döngü
function islem(){
$("ul.tab-buton li").removeClass("aktif");
$("ul.tab-buton li").eq(x).addClass("aktif"); 
 
$("#slider").animate({width:'100%'},sure,function(){
   $(this).css({width:'0%'});
});
x=x+1;
// döngü sayısı toplam li yi aşmaya çalışırsa başa al...  
  if(x>=adet){
    x=0;
  }
}

setInterval(islem,sure);