我正在尝试通过 Javascript 和 CSS 创建一个简单的类似旋转木马的图标列表。 但它似乎不符合我的方式。 谁能帮忙？ 这是我的代码
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 . 谢谢。
最佳答案
本来想写评论的，但是太长了...
您的代码没有任何问题，运行完美。如果你在执行 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 库并对其进行自定义。
I.E=
http://sorgalla.com/projects/jcarousel/
(网上有很多)
关于javascript - 在 javascript 中创建轮播，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19495949/