在javascript中創建一個輪播

我想通過Javascript和CSS創建一個簡單的輪播圖標列表。但它似乎並沒有按照我的方式工作。任何人都可以幫忙嗎？這是我的代碼在javascript中創建一個輪播

JS 
    var container = document.getElementById('container'); 
    var foo = []; 
    for (var i = 0; i < 5; i++) { 
     foo[i] = document.createElement('div'); 
     foo[i].id = 'SingleElement'; 
     foo[i].innerHTML = '<img alt="" src="http://www.placehold.it/300x200"/>'; 
     container.appendChild(foo[i]); 
    } 

    HTML 
    <div id="container"></div> 

    and CSS 
    #container { 
     overflow-x:scroll; 
     white-space: nowrap; 
     float:left; 
    } 
    #SingleElement { 
     float:left; 
     white-space: nowrap; 
    } 
    img { 
     display:inline-block; 
    }

和fiddle example。謝謝。

來源

2013-10-21 Mano

你可能不應該給所有的容器具有相同的「id」值。除此之外，它似乎工作正常。你期待它做什麼？ – Pointy

這個問題似乎是脫離主題，因爲它是關於代碼審查......應該在http://codereview.stackexchange.com/ –

你想讓它們以某種方式動畫嗎？您提供的代碼僅顯示5個佔位符 – ForOhFor

我同意其他評論者的看法，這不是真的是一個旋轉木馬，你應該看看現有的圖書館之一。如果你只是想顯示有5張滾動DIV看看這個：

http://jsfiddle.net/nrybQ/

#container { 
    overflow-x:scroll; 
    white-space: nowrap; 
    float:left; 
    width:100%; 
} 

var container = document.getElementById('container'); 
var foo = []; 
for (var i = 0; i < 5; i++) { 
    foo[i] = document.createElement('span'); 
    foo[i].innerHTML = '<img alt="" src="http://www.placehold.it/300x200"/>'; 
     container.appendChild(foo[i]); 
}

一些提示： - 不要多元素使用IDS - 使用跨度不是一個div -supply容器的寬度

來源

2013-10-21 14:11:00 mainguy

我會寫一個評論，但它會太長......

沒有什麼錯你的代碼，它的工作完美。如果您在執行JS之後查看源代碼。

<body> 
<div id="container"> 
<div id="SingleElement"> 
<img src="http://www.placehold.it/300x200" alt=""> 
</div> 
<div id="SingleElement"> 
<img src="http://www.placehold.it/300x200" alt=""> 
</div> 
....... 
<div id="SingleElement"> 
<img src="http://www.placehold.it/300x200" alt=""> 
</div> 
</div>

並執行JS後的CSS代碼：

#container { 
    float: left; 
    overflow-x: scroll; 
    white-space: nowrap; 
} 

#SingleElement { 
    float: left; 
    white-space: nowrap; 
} 


img { 
    display: inline-block; 
}

結論：

執行後，JS，你將有你的圖像float:left，這隻意味着一個挨着另一個（如果屏幕寬度足夠），但是仍然需要隱藏元素，使用CSS和JS旋轉，下一個和上一個按鈕。

我最大的建議是使用JS庫並對其進行自定義。

即=

http://sorgalla.com/projects/jcarousel/

（也有在互聯網上他們中的很多）。

來源

2013-10-21 14:03:02 jcho360

在javascript中創建一個輪播

回答

相關問題