循環元素的列表來創建沒有jQuery的傳送帶

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); 

UPDATE 上面的例子是有點邪惡，我將結束地獄的t帽子:)
我創建了一個new fiddle與簡單的傳送帶和最小的JavaScript。

基本思想是使用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);