Question

我怎么能用javascript编写这个没有jquery 我想幻灯片向右移动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);
        }
}

我怎么能用javascript写这个（没有jquery）

2 个答案: