Question

我正在尝试创建一个循环，该循环遍历我的图像列表，同时将子项添加到前面，从而形成幻灯片。但是，它不起作用。我不知道我做错了什么。这是我的代码：

var imgs = document.querySelectorAll('.images');
var list = document.getElementsByTagName('LI');
setInterval(function () {
    for (var i = 0; i <= imgs.length; i++) {
        // list.appendChild(imgs[i]);
        imgs[i].style.left = '-4000px';
    }
}, 3500);

Fiddle

我尝试追加孩子，但由于那不起作用，我试着把它们推离屏幕 - 这也不起作用。 PS：我很欣赏非jQuery解决方案，因为我正在尝试熟悉javascript。

Answer 1

我认为如果你改变图像的css属性它会起作用：

.images {
    position:absolute;
}

Answer 2

这个部分解决方案应该给你提示。我改变了一些事情，以便更加自我解释。

另请注意，图像容器使用固定尺寸（64像素），图像有自己的背景色......

这是基于你的小提琴。 updated fiddle (with comments)

HTML：

<ul>
    <li>
        <img src=img-1.jpg class=images alt="">
    </li>
    <li>
        <img src=img-4.jpg class=images alt="">
    </li>
    <li>
        <img src=img-3.jpg class=images alt="">
    </li>
    <li>
        <img src=img-2.jpg class=images alt="">
    </li>
</ul>

CSS：

/* this is the visible area */
ul {
    display: inline-block;
    border: 2px solid #444;
    height: 64px;
    width: 256px;
    overflow: hidden;
    position: relative;
    padding: 0px;
}
/* this element will shift to the left */
li {
    list-style: none;
    width: 100%;
    height: inherit;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 64px;
    height: inherit;
}
li img {
    display: block;
    background-color: black;
    /* to match the size of <li> element */
    width: 100%;
    height: 100%;
}
li:nth-of-type(1) img {
    background-color: red;   
}
li:nth-of-type(2) img {
    background-color: green;   
}
li:nth-of-type(3) img {
    background-color: blue;   
}
li:nth-of-type(4) img {
    background-color: black;   
}

JS：

     // the list of <li> elements, these will shift from right to left
var elements = document.getElementsByTagName('li');
// this function is used to assign starting position to each <li> element
function init() {
    var pos, li;
    for (var i = 0; i < elements.length; i++)
    {
        li = elements[i];
        // assign starting position to <li>
        // the first <li> will have position (0 * 64) = 0px from the left
        // the second <li> (1 * 64) = 64px
        // the third <li> (2 * 64) = 128px
        // etc.
        li.style.left = (i * 64) + 'px';
    }
}
// In this funciton we are moving each <li> by 64px to the left.
function slide() {
    var pos,    // this will hold the numeric value (number of px from the left)
        li,     // this will reference the <li>
        cssPos, // this will hold the CSS left position of the <li> element
        strNumPos   // this will hold the left position without px at the end (it is strill string value);
    for (var i = 0; i < elements.length; i++)
    {
        // store the <li>
        li = elements[i];
        // get the CSS left position eg: "64px"
        cssPos = li.style.left;
        // get the numeric string value without "px" eg: "64"
        strNumPos = cssPos.replace('px', '');
        // convert the string to a number eg: 64
        pos = parseInt(strNumPos, 10);
        // since we are shifting each <li> by 64px to the left, it may happen that the
        // <li> would be pushed outside of the visible area eg: -64px to the left.
        // The visible area is a rectangle 256px wide.
        if (pos <= 0)
        {
            // The <li> would be pushed outside of the visible area so to create carousel effect
            // we will place the <li> at the end of the visible area.
            // the left position will be 196px
         pos = (elements.length - 1) * 64;   
        }
        else
        {
            // just update the position eg: 128 - 64 = 64
         pos = (pos - 64);   
        }
        // set new position to <li>
        li.style.left = pos + 'px';
    }
}
// start with arranging the layout
init();
// start the carousel effect
setInterval(slide, 1500);

<强>更新前面的例子有点邪恶，我最终会在地狱中结束:) 我用简单的轮播和最小的javascript创建了new fiddle。

基本思路是使用vanilla DOM方法.appendChild（）将第一个<li>附加到列表的末尾。

var list = document.getElementsByTagName("li"),
    ul = document.getElementsByTagName("ul")[0];

function slide() {
    // use appendChild() to simply append the first image at the end of the <ul>
    ul.appendChild(list[0]);
}
setInterval(slide, 1500);

循环元素的列表，用于创建没有jQuery的轮播

2 个答案: