jQuery自动更改div

Question

我编写了一个简单的代码来更改div.，但是我认为如果它能自动切换一些超时，那就太好了。

A已经创造了一切，问题只是我不是js程序员。

如果可能的话，HTML A想保持现在的状态。我只会换js。我认为js代码不是很好，但必须从某种程度上开始：)

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

演示

抱歉我的英语..。感谢各位的帮助:)

Answer 1

在不改变html的情况下，下面是我所拥有的：

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

但是，我再次推荐在html中添加数据标记，并确保绿色部分和功能部分具有I。这将确保jquery代码的目标是正确的。

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

Answer 2

您必须为您的javascript添加一个间隔，以便它可以遍历它们。你也可能想改变你做颜色的方式。尝试向它们添加类--它更整洁，更易于控制。

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

演示。http://jsfiddle.net/7Aftr/1/

Answer 3

将此添加到js末尾。

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