0

我正在尝试通过 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;
    }

和小提琴的例子。谢谢你。

4

2 回答 2

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/

（互联网上有很多）。

于 2013-10-21T14:03:02.453 回答
0

我同意其他评论者的观点，即这不是真正的 Carousel，您应该留意其中一个现有的库。如果您只想显示带有 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 - 使用 span 而不是 div - 为容器提供宽度

于 2013-10-21T14:11:00.290 回答