我试图在单个div中添加多个div,并使用水平滚动。
这是我的代码:
<div id="scrollimages">
<script>
var container = document.getElementById("scrollimages");
var array=["img/screen2.png","img/logo.png"];
for(var i=0;i<array.length;i++)
{
var src="url("+array[i]+")";
// var inside = '<div class="block" style="background-image: { ' + src + ' }"></div>';
var inside = '<div class="blocks"></div>'
inside.style.backgroundImage=src;
inside.style.marginLeft=100*i+"%";
container.innerHTML +=inside;
}
</script>
</div>
这是我的css代码:
#scrollimages {
background-color: #00FFFF;
width: 100%;
margin-left:0px;
height: 150px;
overflow: scroll;
white-space:normal;
overflow-y:none;
margin-top:20px;
}
.blocks
{
height: 100%;
width: 100%
margin-left:0px;
word-wrap:normal;
}
我第一次使用java脚本和css all,所以我无法轻松完成这一步。请帮我解决这个问题。
我犯了什么错误,
答案 0 :(得分:1)
相同的#id
只能在文档中出现一次。
var inside = '<div id="block"></div>'
改为使用班级
var inside = '<div class="block"></div>'
和CSS
.block { ...
此外,更容易将属性直接添加到字符串
var inside = '<div class="block" style="background-image:'+ src +'"></div>';
修改:修复style
中的删除{}。
编辑:脚本中还有其他一些问题,这是一个有效的jsfiddle:https://jsfiddle.net/C14L/9hnqheos/
答案 1 :(得分:0)
将Flex属性添加到容器中,同时保持溢出自动。如果使用Flex,则无需使用空格。
#scrollimages {
display: flex;
overflow: auto;
}
答案 2 :(得分:0)
我没有将背景附加到div
,而是创建img
&amp;将它附加在div中。
另外
希望这会有用
<强> JS 强>
var container = document.getElementById("scrollimages");
var myArray=[image urls];
for(var i=0;i < myArray.length;i++){
var _createElem = document.createElement('div');
var _img = document.createElement('img')
_img.src = myArray[i]
_createElem.id ="block_"+i;
_createElem.appendChild(_img)
_createElem.className = "block";
container.appendChild(_createElem);
}
<强> CSS 强>
#scrollimages {
background-color: #00FFFF;
width: 100%;
margin-left:0px;
overflow-x:scroll;
margin-top:20px;
}
.block{
width:auto;
display:table-cell;
height: 100%;
}
如果需要,您可以进行进一步的更改
答案 3 :(得分:0)
根据C14L,需要分配类,并且由于您使用的是getElementByID,因此应为每个元素分配一个单独的ID。
在下面的JS Fiddle中,我已经为backgroundColor交换了backgroundImage,并删除了你的保证金代码(不知道你在这里尝试了什么,但你在第二次迭代时有100%的保证金,第三次有200%的保证金...不要以为这就是你想到的......为了演示目的,'block'的高度设置为30px而不是100%,因为div默认没有高度......
https://jsfiddle.net/7mua0rez/
var container = document.getElementById("scrollimages");
var array=["red","green", "black"];
for(var i=0;i<array.length;i++)
{
var src=array[i];
var inside = '<div id="block' + i + '" class="block"></div>'
container.innerHTML +=inside;
document.getElementById("block" + i).style.backgroundColor=src;
document.getElementById("block" +i).style.marginLeft=10+"%";
}