Question

我想一次显示四个div，但要循环显示。如果30秒钟后首先显示4格，然后30秒钟后4格首先隐藏4格，接下来4格首先显示4格，然后再重复4格这样的重复。怎么做？

<div class="list-div">  
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content1</div>
    <div>Content1</div>
    <div>Content1</div>
    <div>Content1</div>
</div>

Answer 1

实施以下代码。

$(document).ready(function(){
	$.each([4, 5, 6,7], function(i, v) {
		$(".list-div div").eq(v).hide();
	});
  setInterval( function(){ 
	$.each([4, 5, 6,7], function(i, v) {
		$(".list-div div").eq(v).toggle();
	});
	$.each([0, 1, 2,3], function(i, v) {
		$(".list-div div").eq(v).toggle();
	});
  }  , 2000 );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="list-div">  
	<div>ContentG1</div>
	<div>ContentG1</div>
	<div>ContentG1</div>
	<div>ContentG1</div>
	<div>ContentG2</div>
	<div>ContentG2</div>
	<div>ContentG2</div>
	<div>ContentG2</div>
</div>

希望使用以上脚本可以解决您的问题。 如果要设置为30秒，请通过30000。 这里1秒= 1000

Answer 2

您可以将class添加到元素中，然后在jquery中使用.toggle()来隐藏/显示div。下面的示例每3秒切换一次隐藏/显示div：

$('.div-2').hide();

setInterval(function() {
  $('.div-1').toggle();
  $('.div-2').toggle();
}, 3000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-div">  
    <div class="div-1">Content</div>
    <div class="div-1">Content</div>
    <div class="div-1">Content</div>
    <div class="div-1">Content</div>
    <div class="div-2">Content1</div>
    <div class="div-2">Content1</div>
    <div class="div-2">Content1</div>
    <div class="div-2">Content1</div>
</div>

或者不添加带有:lt()和:gt()的课程：

$('.list-div div:gt(3)').hide();

setInterval(function() {
  $('.list-div div:lt(4)').toggle();
  $('.list-div div:gt(3)').toggle();
}, 3000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-div">  
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content1</div>
    <div>Content1</div>
    <div>Content1</div>
    <div>Content1</div>
</div>

Answer 3

尝试此代码将起作用：-

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="list-div">
    <div class='first'>Content</div>
    <div class='first'>Content</div>
    <div class='first'>Content</div>
    <div class='first'>Content</div>
    <div class='second'>Content1</div>
    <div class='second'>Content1</div>
    <div class='second'>Content1</div>
    <div class='second'>Content1</div>
</div>
<script>
var count = 1;
$('.second').hide();
window.setInterval(function() {   //calls click event after a certain time
   changeDiv();
  }, 30000);
function changeDiv(){
  if(count==1){
    $('.second').show();
    $('.first').hide();
    count=2;
  }else{
    $('.second').hide();
    $('.first').show();
    count=1;
  }
}
</script>

Answer 4

研究使用jQuery.load()来加载PHP脚本来生成HTML DIV，然后您可以在interval中进行操作。

使用setinterval（）30s一次更改四个div

4 个答案: