• 08-01-2015, 21:56:14
    #1
    Reveloper
    Merhaba,

    Şöyle bir kod bloğum var

    <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>
    10 saniyede bir aktif class'ı bir alttakine geçsin istiyorum ve bu döngü sürekli devam etsin. Nasıl yapabilirim?

    Tab sistemi var ayrıca yukarıdaki aktif seçiliyken aşağıdakide seçili olmak zorunda
  • 10-01-2015, 00:52:32
    #2
    Burti adlı üyeden alıntı: mesajı görüntüle
    Merhaba,

    Şöyle bir kod bloğum var

    <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>
    10 saniyede bir aktif class'ı bir alttakine geçsin istiyorum ve bu döngü sürekli devam etsin. Nasıl yapabilirim?

    Tab sistemi var ayrıca yukarıdaki aktif seçiliyken aşağıdakide seçili olmak zorunda
    örnek:
    http://jsfiddle.net/bM6uY/8/
  • 10-01-2015, 18:04:13
    #3
    Üyeliği durduruldu
    Burti adlı üyeden alıntı: mesajı görüntüle
    Merhaba,

    Şöyle bir kod bloğum var

    <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>
    10 saniyede bir aktif class'ı bir alttakine geçsin istiyorum ve bu döngü sürekli devam etsin. Nasıl yapabilirim?

    Tab sistemi var ayrıca yukarıdaki aktif seçiliyken aşağıdakide seçili olmak zorunda


    http://codepen.io/CssValley/pen/yygEME




    <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);