How to use js to determine whether the marquee should be executed

user_11241725 0
Viewed 28

I currently use a marquee effect in the project!

I hope that in class = "placard", there is only one set of placard item, and the marquee stops executing. If there is more than one set of placard item, the marquee will be executed. How to write my JavaScript What? Since I am a newbie to JavaScript, I don't know how to implement it at all. I hope I can get your help.

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>

Thank you for your help~

css javascript
1 Answers

At the beginning of the slideLine function you can test whether there are more than one elaments in the marquee - i.e. with class placard_item.

If there aren't then this snippet just returns without doing anything.

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

Note: the test is put within the function rather than just before it is called because I don't know how dynamic your situation is. If more things are added or removed at run time and this function is called then it will do what is required.

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>

user_108674540
Related