javascript - JS自动滚动循环

Question

我对js不太熟悉。我找到了这段代码。我需要帮助来改进它以循环滚动。现在它向下滚动一次。我需要的是当列表结束时，需要再次从列表顶部开始。请帮忙。谢谢。

fiddle :https://jsfiddle.net/EshanRajapakshe/43dhju4m/

例如:

• 列出内容 1
• 列出内容 2
• 列出内容 3
• 列出内容 4
• 列出内容 5
• 列出内容 1
• 列出内容 2
• 列出内容 3

代码:

quadroDeAvisos = document.getElementById("quadroDeAvisos")
lineUp = document.getElementById("lineUp")
avisos = lineUp.getElementsByClassName("avisos")

var count = 0;
var limite = avisos.length -1;
var myVar=setInterval(function(){atualiza()},2000);

function atualiza() {
    if(count == limite)
    count = 0;
  lineUp.style.marginTop = 65*count*(-1)+"px"
  count++
}

Answer 1

按照你的逻辑，我已经更新了你的代码，请检查

quadroDeAvisos = document.getElementById("quadroDeAvisos")
lineUp = document.getElementById("lineUp")
avisos = lineUp.getElementsByClassName("avisos")

var count = 0;
var myVar=setInterval(function(){atualiza()},2000);

function atualiza() {
  lineUp.style.marginTop = 65*count*(-1)+"px"
  count++
  if(count == 5)
    count = 0
}

.quadroDeAvisos{
  width: 134px;
  height: 125px;
  overflow: hidden;
}

#quadroDeAvisos .avisos {
  background-color: #ee9d20;
  border-color: #ba7c18;
}

.avisos {
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
  position: relative;
  color: #fff;
  height: 50px;
  width: 132px;
  font-size: 12px;
  padding: 0;
  overflow: hidden;
}

.lineUp{
  transition: 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="quadroDeAvisos" id="quadroDeAvisos">
<div class="lineUp" id="lineUp">
<div class="avisos">
  <p>List content 1</p>
<p>Sub content</p> 
</div>
<div class="avisos">
  <p>List content 2</p>
<p>Sub content</p> 
</div>
<div class="avisos">
  <p>List content 3</p>
<p>Sub content</p> 
</div>
<div class="avisos">
  <p>List content 4</p>
<p>Sub content</p> 
</div>
<div class="avisos">
  <p>List content 5</p>
<p>Sub content</p> 
</div>

</div></div></div>