7

我正在尝试使用纯 JavaScript构建自己的轮播。

我正在努力寻找添加选项的最有效方法。infinite carousel

由于某些原因，每个元素（照片、通用对象）都必须有一个id

我看到的算法是这样的：

  • 您检查旋转木马是否溢出（足够的对象可以容纳整个容器）
  • 如果不是：在后面追加第一个元素的副本，然后是第二个元素的副本，依此类推。（但是ids会有问题，因为这个对象会有相同的id）

添加副本 - 如果用户滚动到最后一个对象（向右），则将第一个 DOM 对象附加到数组后面
- 如果用户滚动到第一个对象（向左），则将最后一个 DOM 子对象添加到数组前面。

这行得通吗？有没有其他有效的方法来做一个无限轮播？

我还听说最好使用 translate 属性而不是更改 left、right 属性，因此 GPU 的工作量会比 CPU 的更多。

4

2 回答 2

9

我创建了一个简单的滑块，将 css 转换作为动画技术和纯 Javascript。

var img = document.getElementsByClassName("img")[0]; 
img.style.transform = 'translate('+value+'px)';

您可以在此 codepen 片段中对其进行测试。 http://codepen.io/TobiObeck/pen/QKpaBr

按下按钮可沿 x 轴的相应方向平移所有图像。边缘上的图像被设置为透明outerImg.style.opacity = '0';并平移到另一侧。您可以在 HTML 中添加或删除图像元素，它仍然有效。

在第二个 codepen 片段中，您可以看到它是如何工作的。opacity设置为，因此0.5可以观察到哪个图像切换了一侧。因为overflow: hidden被移除，您可以看到边缘上的图像如何在另一侧排队。 http://codepen.io/TobiObeck/pen/WGpdLE

此外值得注意的是检查动画是否完整，否则同时添加的翻译会看起来很奇怪。因此，除非动画完成，否则单击不会触发另一个动画。

img.addEventListener("transitionend", transitionCompleted, true);

var transitionCompleted = function(){
    translationComplete = true;
}

leftBtnCLicked(){
    if(translationComplete === true){
       //doAnimation
    }
}
于 2016-09-24T16:15:43.373 回答
0

您可以使用此代码来操作幻灯片。这基本上是前后旋转阵列

        <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style> 

    body {
    width: 100%;
    height: 100%;
    }

    .parentDiv {
    height: 30%;
    width: 100%;
    display: flex;
    }

    </style>
    <title>test</title>
    </head>
    <body>
    <button class="fwd"> Fwd! </button>
    <button class="bkwd"> Bkwd! </button>
    <script type="text/javascript">
    const arr = ['red', 'blue', 'coral', 'green', 'yellow'];
    let narr = ['red', 'blue', 'coral'];
    


    const parentDiv = document.createElement('div');
    parentDiv.setAttribute('class', 'parentDiv');
    document.body.insertAdjacentElement('afterbegin', parentDiv);


    window.onload = ()=> {
    narr.forEach(color => {
    while(parentDiv.children.length < narr.length){
    const childDiv = document.createElement('div');
    parentDiv.appendChild(childDiv);
    };
    });

    Array.from(parentDiv.children).forEach((child, index) => {
    child.style.border = '1px #000 dotted';
    child.style.minWidth = '20%';
    child.style.minHeight = '20vh';
    child.style.backgroundColor = narr[index]
    });
    };



    document.querySelector('.fwd').addEventListener('click', ()=>{
    narr.shift();

    if(narr[narr.length-1] === arr[arr.length-1]){
        narr.push(arr[0])
    } else {
    narr.push(arr[arr.indexOf(narr[narr.length-1])+1])
    }

    narr.forEach(color => {
    while(parentDiv.children.length < narr.length){
    const childDiv = document.createElement('div');
    parentDiv.appendChild(childDiv);
    };
    });

    Array.from(parentDiv.children).forEach((child, index) => {
    child.style.border = '1px #000 dotted';
    child.style.minWidth = '20%';
    child.style.minHeight = '20vh';
    child.style.backgroundColor = narr[index];
    
    
    });


    })


    document.querySelector('.bkwd').addEventListener('click', ()=>{
    narr.pop();
    if(narr[0] === arr[0]){
        narr.unshift(arr[arr.length-1])
    } else {
    narr.unshift(arr[arr.indexOf(narr[0])-1])
    }

    

    narr.forEach(color => {
    while(parentDiv.children.length < narr.length){
    const childDiv = document.createElement('div');
    parentDiv.appendChild(childDiv);
    };
    });

    Array.from(parentDiv.children).forEach((child, index) => {
    child.style.border = '1px #000 dotted';
    child.style.minWidth = '20%';
    child.style.minHeight = '20vh';
    child.style.backgroundColor = narr[index]
    });
    })

    </script>   
    </body>
    </html>
于 2021-09-03T19:12:19.277 回答