Question

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

小提琴：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

根据您的逻辑，我更新了您的代码，请检查

＆＃13;

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
}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

检查我是否根据您的要求更新了您的逻辑。希望它有所帮助

＆＃13;

function autoScrollDown(){
    $(".inner").css({top:-$(".lineUp").outerHeight()}) // jump back
               .animate({top:0},10000,"linear", autoScrollDown); // and animate
}
function autoScrollUp(){
    $(".inner").css({top:0}) // jump back
               .animate({top:-$(".lineUp").outerHeight()},10000,"linear", autoScrollUp); // and animate
}
// fix hight of lineUp:
$('.lineUp').css({maxHeight: $('.inner').height()});
// duplicate content of inner:
$('.inner').html($('.inner').html() + $('.inner').html());
autoScrollUp();

＆＃13;

*{
    margin:0;
    padding:0;
}
.inner{
    position:relative;
    top:0px;
}
.lineUp{
    overflow:hidden;
}
.avisos {
  display: 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;
  background-color: #ee9d20;
  border-color: #ba7c18;
}

＆＃13;

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

＆＃13;

JS自动滚动循环

2 个答案: