Question

我正在尝试制作一个水平滚动条，通过单击按钮进行前进，并在纯javascript中到达最后一个子项后再次启动。删除重复的div也很重要，因为可能有1000次点击，否则会使dom膨胀。

我让酒吧使用动画，但是无限的部分并没有按预期工作。我尝试了两种不同的方法（见下文），它们都给出了两种不同的错误结果。 'myFunction'有动画效果，但滚动得太远了。 'myFunction2'滚动正确，但没有动画。

我怎样才能让这两件事（滚动和动画）同时工作？

JsFiddle：https://jsfiddle.net/5bq1o4xh/5/

  var slider = document.getElementById('wrapper');
  var currentPosition = 0;
  var elementWidth = 10;

window.myFunction = function() {
    if(currentPosition > 100 - (slider.childElementCount * elementWidth)) {
      currentPosition = currentPosition - elementWidth;
      slider.style.left = currentPosition + '%';
    } else {
        slider.innerHTML += slider.getElementsByClassName('brands-brand')[0].outerHTML;
        slider.removeChild(slider.getElementsByClassName('brands-brand')[0]);
        currentPosition = currentPosition - elementWidth;
        slider.style.left = currentPosition + '%';
    } 
}

window.myFunction2 = function() {
    if(currentPosition > 100 - (slider.childElementCount * elementWidth)) {
      currentPosition = currentPosition - elementWidth;
      slider.style.left = currentPosition + '%';
    } else {
        slider.innerHTML += slider.getElementsByClassName('brands-brand')[0].outerHTML;
        currentPosition = currentPosition + elementWidth;
        slider.style.left = currentPosition + '%';
        slider.removeChild(slider.getElementsByClassName('brands-brand')[0]);
        currentPosition = currentPosition - elementWidth;
        slider.style.left = currentPosition + '%';
    } 
}

.brands-wrapper {
  white-space: nowrap;
  overflow: hidden;
  font-size: 0;
  position: relative;
  width: 1000px;
  border: 1px solid black;
  box-sizing: border-box;
  }

.brands-slide {
  transition: all 0.6s ease;
  position: relative;
  left: 0;
  top: 0;
  box-sizing: border-box;
}

.brands-brand {
  display: inline-block;
  z-index: 1;
  width: 10%;
  font-size: medium;
  font-size: initial;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid red;
  box-sizing: border-box;
  }

<div id="slider" class="brands-wrapper">
  <div id="wrapper" class="brands-slide">
    <div class="brands-brand">
      1
    </div>
    <div class="brands-brand">
      2
    </div>
    <div class="brands-brand">
      3
    </div>
    <div class="brands-brand">
      4
    </div>
    <div class="brands-brand">
      5
    </div>
    <div class="brands-brand">
      6
    </div>
    <div class="brands-brand">
      7
    </div>
    <div class="brands-brand">
      8
    </div>
    <div class="brands-brand">
      9
    </div>
    <div class="brands-brand">
      10
    </div><div class="brands-brand">
      11
    </div><div class="brands-brand">
      12
    </div>
  </div>
</div>


<button onclick="myFunction()">
Next
</button>
<button onclick="myFunction2()">
Next2
</button>

请注意，我正在寻找一个纯粹的JS解决方案，没有jquery。

Answer 1

这里和那里需要一些改进但它应该可以解决这个问题：

＆＃13;

var slider = document.getElementById('wrapper');
  var start = true;

window.myFunction = function() {
    let brand=slider.getElementsByClassName('brands-brand')[0];
    if(start)brand.style.marginLeft = '-10%';
    else{
      slider.appendChild(brand);
      brand.style.marginLeft = '0px';
      slider.getElementsByClassName('brands-brand')[0].style.marginLeft = '-10%';
    }
    start=false;
}

＆＃13;

.brands-wrapper {
  white-space: nowrap;
  overflow: hidden;
  font-size: 0;
  position: relative;
  width: 1000px;
  border: 1px solid black;
  box-sizing: border-box;
  }

.brands-slide {
  position: relative;
  left: 0;
  top: 0;
  box-sizing: border-box;
}

.brands-brand {
  transition: all 0.6s ease;
  display: inline-block;
  z-index: 1;
  width: 10%;
  font-size: medium;
  font-size: initial;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid red;
  box-sizing: border-box;
  }

＆＃13;

<div id="slider" class="brands-wrapper">
  <div id="wrapper" class="brands-slide">
    <div class="brands-brand">
      1
    </div>
    <div class="brands-brand">
      2
    </div>
    <div class="brands-brand">
      3
    </div>
    <div class="brands-brand">
      4
    </div>
    <div class="brands-brand">
      5
    </div>
    <div class="brands-brand">
      6
    </div>
    <div class="brands-brand">
      7
    </div>
    <div class="brands-brand">
      8
    </div>
    <div class="brands-brand">
      9
    </div>
    <div class="brands-brand">
      10
    </div><div class="brands-brand">
      11
    </div><div class="brands-brand">
      12
    </div>
  </div>
</div>


<button onclick="myFunction()">
Next
</button>

＆＃13;

基本上我将切换转换为品牌，每次点击脚本时，它会显示第一个显示的元素，将其推到外面，如果它不是第一次调用该函数，请选择先前隐藏的元素到父母的结尾并重置它的css。

无限水平滚动动画问题

1 个答案: