我怎么能用javascript（沒有jquery）寫這個

Question

我如何在沒有 jquery 的情況下用 javascript 編寫這個我希望幻燈片以 100% 向右移動，然后附加第一個孩子：

她只是向右移動而不附加第一個孩子

$(document).ready(function ($) {

setInterval(function () {
    moveRight();
}, 3000);

function moveRight() {
    $('#slider ul').animate({
        right: 100
    }, 200, function () {
        $('#slider ul li:first-child').appendTo('#slider ul');
        $('#slider ul').css('right', '');
    });
};
}); 

這是我的代碼：

document.addEventListener("DOMContentLoaded", function () {

setInterval(function () {
    moveRight();

}, 5000);

var li = document.getElementsByClassName("image");
var ul = document.getElementById("images");
var len = ul.getElementsByTagName("li").length;
var first = ul.firstChild;

ul.style.width = len + "00%";

function moveRight() {
    ul.style.right = "100%"
    function () {
        ul.appendChild(first)
        ul.style.right = "0%"
    }
}

});

Answer 1

也許你的匿名函數沒有被執行。

改變：

function moveRight() {
    ul.style.right = "100%"
    function () {
        ul.appendChild(first)
        ul.style.right = "0%"
    }
}

到：

function moveRight() {
    ul.style.right = "100%"
    setTimeout(function () {
        ul.appendChild(first)
        ul.style.right = "0%"
    },200);
}

Answer 2

嘗試這個：

    function moveRight() {        

        ul.style.transition = "none";
        ul.style.right = "0";
        ul.appendChild(first);          
        first = document.querySelector('#images li:first-child');  

        setTimeout(function () {        
            ul.style.transition = "";
            ul.style.right = "100%";   

            },1000);
        }
}