带有香草的无限旋转木马 JavaScript

Question

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

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

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

我看到的算法是这样的：

您检查旋转木马是否溢出（有足够的对象来放置整个容器）
如果不是：将第一个元素的副本追加到后面，然后第二个元素的副本等等。（但是id会有问题，因为这个对象会有相同的id）

- 如果用户滚动到最后一个对象（向右），则追加第一个 DOM 对象到数组 back
- 如果用户滚动到第一个对象（向左）然后将最后一个 DOM 子对象添加到数组前面.

这行吗？还有其他有效的无限轮播方式吗？

我还听说最好使用平移属性而不是更改左右属性，因此 GPU 的工作量会比 CPU 多。

Answer 1

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

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

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

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

在第二个代码笔片段中，您可以看到它是如何工作的。 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
    }
}

Answer 2

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

        <!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>

带有香草的无限旋转木马 JavaScript

An infinite carousel with vanilla JavaScript

javascript

carousel

infinite-carousel