Question

我正在寻找为钢结构建筑创建HTML颜色可视化工具。这将放置在我公司的网站上。我想看看在访客单击颜色样本后，是否有可能（以HTML格式）将图像层（处于固定位置）加载到画布背景上。

Here是我正在寻找的类似解决方案。

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = x.length
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" w3-red", "");
  }
  x[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " w3-red";
}

.mySlides {
  display: none
}

<button class="w3-button demo" onclick="currentDiv(2)">Tan Wall</button>
<button class="w3-button demo" onclick="currentDiv(3)">Red Roof</button>
<button class="w3-button demo" onclick="currentDiv(4)">Black Garage</button>
<button class="w3-button demo" onclick="currentDiv(5)">Black Trim</button>
<div class="w3-content" style="max-width:800px">
  <img class="mySlides" src="http://metaldepotinc.com/Canvas-Background.png" style="width:100%">
  <img class="mySlides" src="http://metaldepotinc.com/Wall-Tan.png" style="width:100%">
  <img class="mySlides" src="http://metaldepotinc.com/Roof-Red.png" style="width:100%">
  <img class="mySlides" src="http://metaldepotinc.com/Garage-Black.png" style="width:100%">
  <img class="mySlides" src="http://metaldepotinc.com/Trim-Black.png" style="width:100%">

</div>

例如，当访客单击“红色屋顶”色板时，我希望将“ Red-Roof.png”图层加载到白色建筑画布上。定位将是完美的，因为它已经正确定位在图像文件中。从那里，我希望客户添加更多的图像层，例如“ Tan Wall”，直到建筑物组合符合他们的喜好。单击所有按钮后，最终图像应类似于this。

感谢您的时间！

Answer 1

您可以通过CSS absolute positioning来实现。
另外，我建议使用.classList.toggle而不是替换.className：

var slideIndex = 1;

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = x.length
  }
  x[slideIndex - 1].classList.toggle("active");
  dots[slideIndex - 1].classList.toggle("w3-red")
}

.mySlides {
  display: none;
  position:absolute;
}
.mySlides.active{
  display:block;
}

<button class="w3-button demo" onclick="currentDiv(1)">Tan Wall</button>
<button class="w3-button demo" onclick="currentDiv(2)">Red Roof</button>
<button class="w3-button demo" onclick="currentDiv(3)">Black Garage</button>
<button class="w3-button demo" onclick="currentDiv(4)">Black Trim</button>
<div class="w3-content" style="max-width:800px;position: relative;">
  <img src="http://metaldepotinc.com/Canvas-Background.png" style="width:100%;position: absolute ;z-index:-1">
  <img class="mySlides" src="http://metaldepotinc.com/Wall-Tan.png" style="width:100%">
  <img class="mySlides" src="http://metaldepotinc.com/Roof-Red.png" style="width:100%">
  <img class="mySlides" src="http://metaldepotinc.com/Garage-Black.png" style="width:100%">
  <img class="mySlides" src="http://metaldepotinc.com/Trim-Black.png" style="width:100%">

</div>

编辑：
根据询问者的评论...

在每个图像上使用absolute位置，然后...
使用切换按钮（复选框行为），而不是单击按钮时隐藏所有图像并仅显示一个图像（单选按钮行为）

单击时在背景图像之上加载多个图像层

1 个答案: