Question

我创建了非常常见的“ 推荐部分”以便在网站上实施。

基本上，我要做的是每次单击按钮时，将ul元素的transform: translateX属性水平移动20％，以创建一个推荐轮播。

我的主要问题是，单击最后一条注释后，我找不到找到移至第一个li元素的最佳方法，反之亦然。

此ul元素包含五个li元素。

这是一个JSFIDDLE文件，您可以在其中查看到目前为止的内容。

如果有人喜欢Codepen，请 click here 。

任何帮助或建议将不胜感激。非常感谢！

Answer 1

如果您想在单击最后一条注释后移至第一个li元素，则可以参考一些步骤。

当空间用尽时，您需要停止执行。可以使用向左按钮或向右按钮的处理程序功能。
单击最后一个上的下一个按钮时，将tranform的值更改为0。单击第一个上的上一个按钮时，将transform的值更改为整个事物的总空间。
与此同时，更新init值刚好等于您赋予transform属性的值。

这是我所做的更改

btnLeft.addEventListener("click", function() {    
      if (init < (li.length - 1) * amount) {
        init += amount;
        console.log(init);
        ul.style.transform = "translateX(-" + init + "%)";
       } else {
         ul.style.transform = "translateX(-" + 0 + "%)";
         init = 0
       }
    });

    btnRight.addEventListener("click", function() {
      if (init > 0) {
        init -= amount;
        console.log(init);
        ul.style.transform = "translateX(-" + init + "%)";
       } else {
         init = ((li.length - 1) * amount)
         ul.style.trenter code hereansform = "translateX(-" + init + "%)";
       }
    });

更改后效果很好。

单击事件时更改translateX属性

1 个答案: