我怎么能用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);
        }
}