Question

我制作了一个无限的幻灯片，看起来像猫头鹰轮播“中心”（https://stackblitz.com/edit/angular-8dxiv4）。
我的问题是，当第二张幻灯片与第一张幻灯片相距很远时，平滑的翻译是如此之长。

示例：translateX(-100px) => translateX(-1000px)。我不知道在这里写什么JS。这是我在Codepen中的代码（我希望当我单击翻译时，它看起来像猫头鹰轮播一样快速，我不需要drag事件）。

感谢您的帮助。

var init = 120;
var listSlide = document.getElementById('list-slide');
listSlide.style.width = 120*8 + 'px';


function slideFirst() {
  var init = -120;
  listSlide.style.transform = "translateX(" + init + "px)";
}

#list{
  width: 480px;
  height: 100px;
  margin: 0 auto;
  overflow: hidden;
}

.list-inner{
  height: 100%;
  transition: transform 0.25s ease;
}

.list-inner .item{
  position: relative;
  float: left;
  width: 100px;
  height: 100px;
  background: red;
  margin-right: 20px;
}

<div class="frame">
  <div id="list">
    
    <div id="list-slide" class="list-inner" style="transform: translateX(-720px)">
      <div class="item">Item 01</div>
      <div class="item">Item 02</div>
      <div class="item">Item 03</div>
      <div class="item">Item 04</div>
      <div class="item">Item 05</div>
      <div class="item">Item 06</div>
      <div class="item">Item 07</div>
      <div class="item">Item 08</div>
    </div>
    
  </div>
  
  <button onclick="slideFirst()">Click</button>
</div>

我试图删除转换并在此之后添加它，但是它不起作用。

var trans = -100;// a some distance
listSlide.style.transition = "all 0.25s ease 0s";

setTimeout(function(){
   listSlide.style.transition = "all 0s ease 0s";
   listSlide.style.transform = 'translateX(' + trans + 'px)';
}, 10);

Answer 1

这是我为您提供的解决方案。我已经更改了js文件中的某些代码行，并用注释分隔了。希望对您有帮助。

var init = 120;
var listSlide = document.getElementById('list-slide');
listSlide.style.width = 120*8 + 'px';

// My code starts here

var sliderWidthTracker = -(120*6);

function slideFirst() {
  
  
  if (sliderWidthTracker < 0) {
    sliderWidthTracker = sliderWidthTracker+120;
    listSlide.style.transform = "translateX(" + sliderWidthTracker + "px)";
  }
}

// My code ends here

#list{
  width: 480px;
  height: 100px;
  margin: 0 auto;
  overflow: hidden;
}

.list-inner{
  height: 100%;
  transition: transform 0.25s ease;
}

.list-inner .item{
  position: relative;
  float: left;
  width: 100px;
  height: 100px;
  background: red;
  margin-right: 20px;
}

<div class="frame">
  <div id="list">
    
    <div id="list-slide" class="list-inner" style="transform: translateX(-720px)">
      <div class="item">Item 01</div>
      <div class="item">Item 02</div>
      <div class="item">Item 03</div>
      <div class="item">Item 04</div>
      <div class="item">Item 05</div>
      <div class="item">Item 06</div>
      <div class="item">Item 07</div>
      <div class="item">Item 08</div>
    </div>
    
  </div>
  
  <button onclick="slideFirst()">Click</button>
</div>

Answer 2

我更改了transition属性，它也更快，更流畅。

transition: all .8s ease 0s;

var init = 120;
var listSlide = document.getElementById('list-slide');
listSlide.style.width = 120*8 + 'px';


function slideFirst() {
  var init = -120;
  listSlide.style.transform = "translateX(" + init + "px)";
}

#list{
  width: 480px;
  height: 100px;
  margin: 0 auto;
  overflow: hidden;
}

.list-inner{
  height: 100%;
  transition: all .8s ease 0s;
}

.list-inner .item{
  position: relative;
  float: left;
  width: 100px;
  height: 100px;
  background: red;
  margin-right: 20px;
}

<div class="frame">
  <div id="list">
    
    <div id="list-slide" class="list-inner" style="transform: translateX(-720px)">
      <div class="item">Item 01</div>
      <div class="item">Item 02</div>
      <div class="item">Item 03</div>
      <div class="item">Item 04</div>
      <div class="item">Item 05</div>
      <div class="item">Item 06</div>
      <div class="item">Item 07</div>
      <div class="item">Item 08</div>
    </div>
    
  </div>
  
  <button onclick="slideFirst()">Click</button>
</div>

TranslateX与其他距离

2 个答案: