Question

我试图通过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。谢谢。

Answer 1

我打算发表评论，但这会太长了......

您的代码没有任何问题，它的工作正常。如果在执行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/

（互联网上有很多）。

Answer 2

我同意其他评论者的意见，这不是真正的旋转木马，你应该留意现有的一个图书馆。如果您只想显示带有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]);
}

一些提示： - 不要将id用于多个元素 - 使用跨度而不是div - 为容器提供宽度

在javascript中创建一个轮播

2 个答案: