Question

我不知道为什么人们没有回答这个问题。我正在制作一个水平的无限循环滑块。我正在使用的方法是制作一个ul容器，其中包含3个图像，例如，如果有3个图像，则克隆第一个图像并将其放置到滑块的末尾，与最后一个图像相同并将其放在第一张图像之前。所以现在总图像是5.默认滑块转换始终从第一张图片开始，而不是从克隆一开始。这是一个example。我面临的是，我希望在滑块到达最后一个克隆图像之后重置滑块，并使用相同的连续循环（如轮播滑块）。我尝试将addEventListener与事件名称transitionend一起使用，但该事件没有正确执行并显示不满意的行为。有办法解决这个问题吗？

＆＃13;

(function () {
    var resetTranslation = "translate3d(-300px,0px,0px)";
    var elm = document.querySelector('.Working');
    elm.style.transform = resetTranslation;
    var arr = document.querySelectorAll('.Working li');
    var clonefirst,
        clonelast,
        width = 300;
    index = 2;
    clonefirst = arr[0].cloneNode(true);
    clonelast = arr[arr.length - 1].cloneNode(true);

    elm.insertBefore(clonelast, arr[0]);
    arr[arr.length - 1].parentNode.insertBefore(clonefirst, arr[arr.length - 1].nextSibling);
    //Update
    arr = document.querySelectorAll('.Working li');
    elm.style.transition = 'transform 1.5s ease';

    setInterval(function () {

        elm.style.transform = 'translate3d(-' + index * width + 'px,0px,0px)';
        if (index == arr.length - 1) {
            elm.addEventListener('transitionend', function () {
                elm.style.transform = resetTranslation;
            });
            index = 1;
        }
        index++;

    }, 4000)

})();

＆＃13;

*{
    box-sizing: border-box;
}
.wrapper{
    position: relative;
    overflow: hidden;
    height: 320px;
    width: 300px;


}

.Working{
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 3125%;


}
.Working li{
    position: relative;
    float: left;
}


img{
    max-width: 100%;
    display: block;
}

.SubContainer:after{
    display: table;
    clear: both;
    content: "";
}

＆＃13;

<div class="wrapper">
    <ul class="SubContainer Working">
        <li> <img class="" src="http://i.imgur.com/HqQb9V9.jpg" /></li>
        <li><img class="" src="http://i.imgur.com/PMBBc07.jpg" /></li>
        <li><img  class="" src="http://i.imgur.com/GRrGSxe.jpg" /></li>
    </ul>
</div>

＆＃13;

Answer 1

我已经搞乱了你的代码来破解修复：https://jsfiddle.net/rap8o3q0/

改变的部分：

var currentItem = 1;

setInterval(function () {
    var getWidth = window.innerWidth;

    if(len === currentItem){
        i = 1;
        currentItem = 1;
    } else {
        currentItem++;
        i++;
    }

    var val = 'translate3d(-' + (i-1) * getWidth + 'px,0px,0px)';
    UnorderedListElement.style.transform = val;

}, 3000);

Answer 2

您的transition end事件未立即触发，因为上次克隆图像出现时未计算上一次转换。您可以使用setTimeout函数轻松实现此功能，并在重置转换后传递等待的毫秒数。我不知道它是一个有效的解决方案，但我认为通过使用此功能可以轻松完成。现在我用这个来修复你的代码。

＆＃13;

(function () {
    var elm = document.querySelector('.Working');
    var arr = document.querySelectorAll('.Working li');
    var clonefirst,
        clonelast,
        width = 300;
    index = 2;
    clonefirst = arr[0].cloneNode(true);
    clonelast = arr[arr.length - 1].cloneNode(true);

    elm.insertBefore(clonelast, arr[0]);
    arr[arr.length - 1].parentNode.insertBefore(clonefirst, arr[arr.length - 1].nextSibling);
    //Update
    arr = document.querySelectorAll('.Working li');

     setInterval(function () {
        $(elm).css({
            'transform': 'translate3d(-' + (index * width) + 'px,0px,0px)',
            'transition': 'transform 1.5s ease'
        });
        if (index == arr.length - 1) {
            setTimeout(function () {
                $(elm).css({'transform': 'translate3d(-300px,0px,0px)', 'transition': 'none'});
                index = 1;
            }, 1400);

        }
        index++;

    }, 2000)

})();

＆＃13;

* {
    box-sizing: border-box;
}

.wrapper {
    position: relative;
    overflow: hidden;
    height: 320px;
    width: 300px;
    margin-top: 8px;

}

.Working {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    transform: translateX(-300px);
    width: 3125%;

}

.Working li {
    position: relative;
    float: left;
}

img {
    max-width: 100%;
    display: block;
}

.SubContainer:after {
    display: table;
    clear: both;
    content: "";
}

#checkboxer:checked + .wrapper {
    overflow: visible;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="checkboxer">Remove Overflow Hidden</label>
<input type="checkbox" id="checkboxer" name="checkboxer"/>

<div class="wrapper">
    <ul class="SubContainer Working">
        <li> <img class="" src="http://i.imgur.com/HqQb9V9.jpg" /></li>
        <li><img class="" src="http://i.imgur.com/PMBBc07.jpg" /></li>
        <li><img  class="" src="http://i.imgur.com/GRrGSxe.jpg" /></li>
    </ul>
</div>

＆＃13;

Answer 3

要将滑块恢复到第一个位置，您需要在最后一次（第3次）翻译后触发transition end事件，这只能运行一次。

$(UnorderedListElement).one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function ()
    {
        {
            $(UnorderedListElement).css('transform', 'translate3d(0, 0, 0)');

        }
    });

但你需要立即翻译。在下面的链接中，您可以看到与您的滑块非常相似的滑块，但是通过绝对定位工作并更改left属性而不是变换。

Slider

最后一件事：滑动图像容器的孔不是一个好主意。您必须单独滑动图像。在你的方式有一个明显的问题：当页面滑出最后一个图像时，没有下一个图像推送它！

Answer 4

您可以将setInterval更新为

  setInterval(function() {
    var getWidth = window.innerWidth;
    var val = 'translate3d(-' + i * getWidth + 'px,0px,0px)';
    UnorderedListElement.style.transform = val;

    i++;
    if (i == 3) { //assuming three images here 
      i = 0
    }


  }, 3000)

＆＃13;

var DomChanger;

(function() {


  var listItem = document.querySelectorAll('.ah-slider li');
  var len = listItem.length;


  var getImage = document.querySelector('.ah-slider li img');
  var UnorderedListElement = document.querySelector('.ah-slider');


  var outerDiv = document.querySelector('.Slider');

  UnorderedListElement.setAttribute('style', 'width:' + (len * 1000 + 215) + '%');


  var i = 1;

  DomChanger = function() {

    for (var i = 0; i < len; ++i) {
      listItem[i].setAttribute('style', 'width:' + window.innerWidth + 'px');
    }
    outerDiv.setAttribute('style', 'height:' + getImage.clientHeight + 'px');

  };


  setInterval(function() {
    var getWidth = window.innerWidth;
    var val = 'translate3d(-' + i * getWidth + 'px,0px,0px)';
    UnorderedListElement.style.transform = val;

    i++;
    if (i == 3) {
      i = 0
    }


  }, 3000)


})();





window.onload = function() {
  DomChanger();

};
window.onresize = function() {

  DomChanger();
};

＆＃13;

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: #fff;
}

.Slider {
  width: 100%;
  margin: 50px 0 0;
  position: relative;
  overflow: hidden;
}

.ah-slider {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  transition: transform .5s ease;
}

.ah-slider li {
  position: relative;
  float: left;
}

.ah-slider li img {
  max-width: 100%;
  display: block;
}

.clearFix:after {
  content: "";
  display: table;
  clear: both;
}

＆＃13;

<div class="Slider">
  <ul class="ah-slider clearFix">
    <li>
      <a href=""><img class="" src="http://i.imgur.com/L9Zi1UR.jpg" title="" /></a>
    </li>
    <li>
      <a href=""><img class="" src="http://i.imgur.com/FEcEwFs.jpg" title="" /></a>
    </li>
    <li><a href=""><img  class="" src=http://i.imgur.com/hURSKNa.jpg" title="" /></a></li>


  </ul>
</div>

＆＃13;

Javascript Slider在转换结束时无法正常工作

4 个答案: