尝试使用javascript onclick函数替换div内容。
function x() {
document.getElementById("carousel").
innerHTML = "<figure><img src=\"src/theme-captures/ando-ios-min.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
"\t\t\t\t\t\t\t\t\t<figure><img src=\"src/theme-captures/unpivot-min.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
"\t\t\t\t\t\t\t\t\t<figure><img src=\"src/theme-captures/acn-n-theme-min.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
"\t\t\t\t\t\t\t\t\t<figure><img src=\"src/theme-captures/cirtangle-shadow-min.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
"\t\t\t\t\t\t\t\t\t<figure><img src=\"src/theme-captures/white-drawn-min.png\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
"\t\t\t\t\t\t\t\t\t<figure><img src=\"src/theme-captures/stock-qetto.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
"\t\t\t\t\t\t\t\t\t<figure><img src=\"src/theme-captures/craven.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
"\t\t\t\t\t\t\t\t\t<figure><img src=\"src/theme-captures/muze-min.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
"\t\t\t\t\t\t\t\t\t<figure><img src=\"src/theme-captures/windows-8-min.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
"\t\t\t\t\t\t\t\t\t<figure><img src=\"src/theme-captures/green-lanting-min.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
"\t\t\t\t\t\t\t\t\t<figure><img src=\"src/theme-captures/desa-min.png\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
"\t\t\t\t\t\t\t\t\t<figure><img src=\"src/theme-captures/dark-moon-min.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>";
}
<button onclick="x()">click</button>
这是不起作用的,当使用内部超文本标记语言作为innerHTML = "replace the div"
时,它起作用。但是为什么它在这种情况下不起作用,以及如何修复。有人能帮帮我吗?
发布于 2018-08-16 04:12:58
它似乎真的起作用了。我试着运行它,它似乎起作用了。
在这里尝试一下:
function x() {
document.getElementById("carousel").innerHTML = "<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
"\t\t\t\t\t\t\t\t\t<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
"\t\t\t\t\t\t\t\t\t<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
"\t\t\t\t\t\t\t\t\t<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
"\t\t\t\t\t\t\t\t\t<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
"\t\t\t\t\t\t\t\t\t<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
"\t\t\t\t\t\t\t\t\t<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
"\t\t\t\t\t\t\t\t\t<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
"\t\t\t\t\t\t\t\t\t<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
"\t\t\t\t\t\t\t\t\t<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
"\t\t\t\t\t\t\t\t\t<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
"\t\t\t\t\t\t\t\t\t<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>";
}
<button onclick="x()">click</button>
<div id="carousel"></div>
发布于 2018-08-16 04:25:27
您可以将图像文件名存储到一个数组中,然后遍历该数组并为每个文件/图像创建一个元素,然后将其附加到#carousel
下面是一个例子:(我没有添加所有的图片,剩下的图片可以自己添加)
var arrOfImgs = ["ando-ios-min.jpg", "unpivot-min.jpg", "acn-n-theme-min.jpg", "cirtangle-shadow-min.jpg", "white-drawn-min.png"];
function x() {
var carousel = document.getElementById("carousel");
carousel.innerHTML = ""
for (let imgSrc of arrOfImgs){
var imgElem = document.createElement("img");
imgElem.src = "/src/theme-captures/" + imgSrc;
imgElem.className = "img-class";
imgElem.alt = imgSrc;
carousel.append(imgElem)
}
}
.img-class{
height: 56%;
margin-top: 19px;
border: 1px solid;
margin: 4px;
}
<button onclick="x()">click</button>
<div id="carousel"></div>
但是,如果您使用的是Bootstrap carousel,那么您的答案将会大不相同,我建议您编辑您的问题以添加该信息
https://stackoverflow.com/questions/51865592
复制相似问题