如何使用js来确定是否应该执行marquee

Question

我目前在项目中使用了字幕效果！

我希望在课堂上="；标语牌"；，只有一组标语牌项目，并且字幕停止执行。如果如果有一套以上的标语牌项目，将执行字幕。如何编写我的JavaScript什么？由于我是JavaScript的新手，我根本不知道如何实现它。我希望我能得到你的帮助。

function slideLine(box, stf, delay, speed, h) {
console.log('slideLine')
var slideBox = document.getElementById(box);
var delay = delay || 500,
speed = speed || 20,
h = h || 20;
var tid = null,
pause = false;
var s = function() {
tid = setInterval(slide, speed);
}
var slide = function() {
if (pause) return;
slideBox.scrollTop += 1;
if (slideBox.scrollTop % h == 0) {
clearInterval(tid);
slideBox.appendChild(slideBox.getElementsByTagName(stf)[0]);
slideBox.scrollTop = 0;
setTimeout(s, delay);
}
}
slideBox.onmouseover = function() {
pause = true;
}
slideBox.onmouseout = function() {
pause = false;
}
setTimeout(s, delay);
}
slideLine('js-placard', 'div', 1000, 25, 20);

.contact_placard .placard {
background-color: #fff0d8;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding: 8px 0px;
margin-top: 58px;
margin-bottom: 12px;
height: 20px;
overflow: hidden;
}
.contact_placard .placard_item {
display: flex;
align-items: center;
line-height: 5px;
}
.contact_placard .placard .megaphone {
display: inline-block;
width: 20px;
height: 20px;
background-size: cover;
margin-right: 8px;
}
.contact_placard .placard .placard_text {
font-size: 13px;
letter-spacing: 0.43px;
}
.contact_placard .placard .placard_link {
font-size: 13px;
letter-spacing: 0.43px;
margin-left: 8px;
color: red;
}

<section class="contact_placard">
<div class="placard" id="js-placard">
<div class="placard_item">
<span class="megaphone"></span>
<h3 class="placard_text">apple</h3>
</div>
<div class="placard_item">
<span class="megaphone"></span>
<h3 class="placard_text">Strawberry</h3>
</div>
<div class="placard_item">
<span class="megaphone"></span>
<h3 class="placard_text">banana</h3>
</div>
</div>
</section>

谢谢你的帮助~

Answer 1

在slideLine函数的开头，您可以测试字幕中是否有多个elaments，即使用class plaard_item。

如果没有，那么这个片段就返回而不执行任何操作。

if (document.querySelectorAll('.placard_item').length <= 1) return;

注意：测试是放在函数中的，而不是在它被调用之前，因为我不知道你的情况有多动态。如果在运行时添加或删除了更多的东西，并且调用了这个函数，那么它将执行所需的操作。

function slideLine(box, stf, delay, speed, h) {
if (document.querySelectorAll('.placard_item').length <= 1) return;
console.log('slideLine')
var slideBox = document.getElementById(box);
var delay = delay || 500,
speed = speed || 20,
h = h || 20;
var tid = null,
pause = false;
var s = function() {
tid = setInterval(slide, speed);
}
var slide = function() {
if (pause) return;
slideBox.scrollTop += 1;
if (slideBox.scrollTop % h == 0) {
clearInterval(tid);
slideBox.appendChild(slideBox.getElementsByTagName(stf)[0]);
slideBox.scrollTop = 0;
setTimeout(s, delay);
}
}
slideBox.onmouseover = function() {
pause = true;
}
slideBox.onmouseout = function() {
pause = false;
}
setTimeout(s, delay);
}
slideLine('js-placard', 'div', 1000, 25, 20);

.contact_placard .placard {
background-color: #fff0d8;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding: 8px 0px;
margin-top: 58px;
margin-bottom: 12px;
height: 20px;
overflow: hidden;
}
.contact_placard .placard_item {
display: flex;
align-items: center;
line-height: 5px;
}
.contact_placard .placard .megaphone {
display: inline-block;
width: 20px;
height: 20px;
background-size: cover;
margin-right: 8px;
}
.contact_placard .placard .placard_text {
font-size: 13px;
letter-spacing: 0.43px;
}
.contact_placard .placard .placard_link {
font-size: 13px;
letter-spacing: 0.43px;
margin-left: 8px;
color: red;
}

<section class="contact_placard">
<div class="placard" id="js-placard">
<div class="placard_item">
<span class="megaphone"></span>
<h3 class="placard_text">apple</h3>
</div>
<div class="placard_item">
<span class="megaphone"></span>
<h3 class="placard_text">Strawberry</h3>
</div>
<div class="placard_item">
<span class="megaphone"></span>
<h3 class="placard_text">banana</h3>
</div>
</div>
</section>