Question

我正在尝试在Bandzoogle网站上编码，这可能会导致错误，我尝试了许多不同的方法来实现这一点。我尝试过更改CSS，显示和隐藏对象，但这是远程工作的唯一方法。问题是，当加载时，div只会切换一次或两次，当它们应该处于无限循环时。我想出了所有的想法，请帮忙。请记住，并非所有样式都存在，因为大部分样式都是通过网站的主题完成的。这就是我所做的所有代码。

＆＃13;

.nextshow {
color:#00000;
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
text-align: center;
cursor: pointer;
border:solid;
height:150px;
border-color:#747a85;
box-shadow: none;
padding:7px;
}

div.nextshow:hover {
-moz-box-shadow: inset 0 0 20px #b3b3b3;
-webkit-box-shadow: inset 0 0 20px #b3b3b3;
box-shadow: inset 0 0 20px #b3b3b3;
}

.new_album {
  color:#00000;
  text-align: center;
  cursor: pointer;
  padding:1px;
  display:none;
}

.nextshow_title {
color:#00000;
	text-align:center;
	padding: none;
}

.nextshowtext2 {
  font-size: 200%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="nextshow">


	<a href="somelink for show" id="nextshow_title" class="nextshow_title">
		<div id="nextshow_title" class="nextshow_title">
			<h2 class="nextshowtext1">
			This is text
			</h2>
			<h2 class="nextshowtext2">here is more text
			</h2>
		</div>
	</a

	<a href="this is another link" id="new_album" class="new_album">
	<div id="new_album" class="new_album">
		<h2>
		All the text here<br>
</h2>
		<h1>is just filler<br>
</h1>
		<h2>and is just to show what the code is like
		</h2>
	</div>
</a>

	

<script>

  $('.nextshow').ready(function() {
	setInterval( function() {
  		$('.nextshow_title').css('display', 'none');
		$('.new_album').css('display', 'block');
    }, 8000);
  	setInterval( function() {
  		$('.nextshow_title').css('display', 'block');
		$('.new_album').css('display', 'none');
    }, 16000);
});
  
</script>

＆＃13;

Answer 1

请尝试以下代码：

 var page1=true;
    $('.nextshow').ready(function() {
        setInterval( function() {
          if(page1){
            $('.nextshow_title').css('display', 'none');
            $('.new_album').css('display', 'block');}
          else{

            $('.nextshow_title').css('display', 'block');
            $('.new_album').css('display', 'none');
          }
          page1=!page1;
        }, 8000);
    });

我觉得最好有一个间隔（为简单起见）。它只需要一些变量（page1）并切换它，切换div的可见性。

编辑：更简单的方式

$('.nextshow').ready(function() {
  setInterval(function() {
      $('.nextshow_title').toggle();
      $('.new_album').toggle();
  }, 8000);
});

Answer 2

如果我正确理解您的问题，您应该只需要一个间隔。如果您对这些元素执行任何其他操作，则还应将其设置为远远超出性能的原因。

＆＃13;

$('.nextshow').ready(function() {
  setInterval(function() {
    $('.nextshow__title').toggle();
    $('.new_album').toggle();
  }, 8000);
});

＆＃13;

如何使用jQuery在一个时间间隔内切换出一个div中的两个div？

2 个答案: