循环元素's列表创建一个没有jQuery的转盘

looping element's list to create a carousel without jQuery

本文关键字：一个 jQuery 元素 创建 列表 循环      更新时间：2023-09-26

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

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

我试着给孩子附加字幕，但由于没用，我试着把它们从屏幕上推下来——也没用。附言：我将感谢一个非jQuery解决方案，因为我正在努力熟悉javascript。

我认为如果您更改图像的css属性，它会起作用：

.images {
    position:absolute;
}

这个部分解决方案应该会给您提示。我改变了一些事情，使之更加不言自明。

还要注意，图像容器使用了固定大小（64px），图像有自己的背景颜色。。。

它是以你的小提琴为基础的。更新的fiddle（带评论）

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创建了一个新的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);
相关文章：