Question

我的主页上有三个小的绝对定位的div。我想一次只出现一个div，所以页面应该只从第一个div开始，在3秒后，第二个div和3秒后第三个div，这个过程应该无限地继续。这是我为此做了10次的for循环。我怎样才能使这一切无限发生？

// this for not making infinite loop
var nb_loop=0;
var max_loop=10; 
var j=0;
for (var i=2; i<=3 ; i++){
  nb_loop++;
  j++;
  console.log("i="+i+", j="+j); // or alert if you want
  if (j>=3)
    j=0;
  if (i>=3)
    i=0;
  if (nb_loop>max_loop)
    break; 
}

Answer 1

<强> JS：

var counter = 1;
function showDiv(){
$('.display').hide();
$('#div'+counter).show();
(counter == 4 ? counter = 1 : counter++)
}

showDiv();
var timer = setInterval(showDiv, 3000);

<强> HTML：

 <div id='container'>
   <div id='div1' class='display' style="background-color: red;"> 
        div1
   </div>

    <div id='div2' class='display' style="background-color: green;"> 
       div2
    </div>

    <div id='div3' class='display' style="background-color: blue;"> 
       div3
    </div>

     <div id='div4' class='display' style="background-color: yellow;"> 
       div4
     </div>
 </div>

<强> CSS：

 .display { display: none; }

使用Jquery setInterval 函数使用无限时间

Answer 2

使用 JQUERY SETTIMEOUT（）功能

像这样

 jQuery(document).ready(function () {
    //hide a div after 3 seconds
   setTimeout(function(){ jQuery("#div").hide(); }, 3000);

 });

在我的主页上有三个小的绝对定位的div

2 个答案: