jQuery changer automatiquement divs

Question

J'ai fait un code simple pour changer ... divs Mais je pensais que ce serait bien si elle bascule automatiquement avec un certain délai.

A ont créé tout le problème est que je ne suis pas un programmeur js.

Le HTML A veut garder comme maintenant si possible .. Je ne changerais que js. Je pense que le code js est pas bien, mais il faut en quelque sorte commencer :)

HTML ->

<div class="container"> 
     <!-- helper class --> 
     <div class="green-section hover push"> 
      <div class="col-md-3"></div> 
      <!-- Text inner --> 
      <div class="col-md-6"> 
       <div class="text-inner"> 
       <p class="text-centered web-description"><span class="webdesign">Work 
        great on all device <i class="icon-magic"></i></span> Lorem ipsum 
        dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
        incididunt ut labore et dolore magna aliqua. 
       </p> 
       <p class="text-centered app-description"><span class="appdev">Mobile 
        friendly <i class="icon-beaker"></i></span> Lorem ipsum dolor sit 
        amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
        ut labore et dolore magna aliqua. 
       </p> 
       <p class="text-centered doc-description"><span class="doc">Detailed 
        documentation <i class="icon-info"></i></span> Lorem ipsum dolor sit 
        amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
        ut labore et dolore magna aliqua. 
       </p> 
       <p class="text-centered clean-description"><span class="clean">Clean 
        code <i class="icon-list-ul"></i></span> Lorem ipsum dolor sit amet, 
        consectetur adipisicing elit, sed do eiusmod tempor incididunt ut 
        labore et dolore magna aliqua. 
       </p> 
       </div> 
      </div> 
      <!-- Text inner end --> 
      <!-- helper class --> 
      <div class="col-md-3"></div> 
     </div> 
    </div> 
    <!-- ||||| Welcome End ||||| --> 
    <!-- ||||| Features ||||| --> 
    <div class="container"> 
     <div class="features"> 
      <!-- first box --> 
      <div class="col-md-3 padding-5 dark text-center btn1 hover"><i class="icon-3x icon-code"></i> 
      </div> 
      <!-- second box --> 
      <div class="col-md-3 padding-5 dark text-center btn2 hover"><i class="icon-3x icon-copy"></i> 
      </div> 
      <!-- third box --> 
      <div class="col-md-3 padding-5 dark text-center btn3 hover"><i class="icon-3x icon-mobile-phone"></i> 
      </div> 
      <!-- fourth Box --> 
      <div class="col-md-3 padding-5 laptop-bg text-center btn4 hover"><i class="icon-3x icon-laptop"></i> 
      </div> 
     </div> 
     <!-- features end --> 
    </div> 
    <!-- container end --> 

JS

$(".btn1").on("click", function() { 
    $('.btn1').css("background-color", "#7fe5b2"); 
    $('.btn2,.btn3,.btn4').css("background-color", "#222222"); 
}); 
$(".btn2").on("click", function() { 
    $('.btn2').css("background-color", "#7fe5b2"); 
    $('.btn3,.btn4,.btn1').css("background-color", "#222222"); 
}); 
$(".btn3").on("click", function() { 
    $('.btn3').css("background-color", "#7fe5b2"); 
    $('.btn4,.btn2,.btn1').css("background-color", "#222222"); 
}); 
$(".btn4").on("click", function() { 
    $('.btn4').css("background-color", "#7fe5b2"); 
    $('.btn3,.btn2,.btn1').css("background-color", "#222222"); 
}); 


$(".toggle-btn").on("click", function() { 
    $('.green-section').css("background", "#222222"); 

}); 


$(".btn3").on('click', function (e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    $(".app-description").show(); 
    $(".web-description, .clean-description, .doc-description").hide(); 
}); 

$(".btn4").on('click', function (e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    $(".web-description").show(); 
    $(".app-description, .clean-description, .doc-description").hide(); 
}); 
$(".btn2").on('click', function (e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    $(".doc-description").show(); 
    $(".app-description, .clean-description, .web-description").hide(); 
}); 
$(".btn1").on('click', function (e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    $(".clean-description").show(); 
    $(".app-description, .web-description, .doc-description").hide(); 
}); 

DEMO

Désolé pour mon anglais. .. et merci pour toute aide les gars :)

Answer 1

Sans changer votre code html à ing tout, voici ce que j'ai:

// link the btns and the descriptions 
$('.btn1').data('description', '.clean-description'); 
$('.btn2').data('description', '.doc-description'); 
$('.btn3').data('description', '.app-description'); 
$('.btn4').data('description', '.web-description'); 

// for each div in the .features section (btns) add a click event 
$(".features div").on("click", function (e) { 
    e.preventDefault(); 
    $('.features div').removeClass('selected'); 
    $(this).addClass('selected'); 
    $('.green-section .text-inner p').hide(); 
    $($(this).data('description')).show(); 
}); 

// Add a function to click the next btn in the .features section 
function clickNext() { 
    var divs = $('.features div.selected').next(); 
    if (divs.length) { 
     divs[0].click(); 
    } else { 
     $('.features div')[0].click(); 
    } 
} 

// add an interval to click the next btn every 4 seconds 
setInterval(function() { 
    clickNext(); 
}, 4000); 

Mais, je recommanderais d'ajouter les étiquettes de données dans le code HTML et en vous assurant que le vert-section et la section caractéristiques ont ids. Cela garantira que vous ciblez les bonnes choses avec votre code jquery.

http://jsfiddle.net/bhlaird/7bbDq/1/

Answer 2

Vous devez ajouter un intervalle à votre javascript afin qu'il puisse boucle à travers eux. Vous pouvez également changer la façon dont vous faites les couleurs. Essayez d'ajouter des classes à leur beaucoup plus propre et plus facile à contrôler

var selectedDiv = 1; 
$(document).ready(function(){ 
    setInterval(rotate,5000); 
}); 


function rotate(){ 
console.log("ASDFASFD"); 
switch(selectedDiv) 
{ 
    case 1: 
     $(".btn2").click(); 
     break; 
    case 2: 
     $(".btn3").click(); 
     break; 
    case 3: 
     $(".btn4").click(); 
     break; 
    case 4: 
     $(".btn1").click(); 
     break; 
} 
} 

Démo. http://jsfiddle.net/7Aftr/1/

Answer 3

ajouter ceci à la fin de js

autoToggle = function (no) 
{ 
    $(".btn"+no).click(); 
    if(no == 4) 
    { 
     no=1; 
    } 
    else 
    { 
     no++; 
    } 
    setTimeout("autoToggle("+no+")",2000); 
} 
autoToggle(1);