调试在库中复制较大图像的Javascript代码。

时间:2017-03-09 04:20:49

标签: javascript

由于移动,我从编码中休息了一段时间,并且最近尝试使用一些新图片更新我的网站。我附上了一个小提琴,显示了我遇到的问题。如果我想在我的图库中添加一个新图像(在这种情况下是小提琴上的hike1),每当您单击图像查看较大的jpg时,它都无法正常显示。单击缩略图jpgs时,它们会显示前面的图像,而不是该缩略图的较大图像。 (点击日落照片显示hike1照片,firespinner照片显示日落照片等。)

有人可以帮忙吗?我确信这是一个简单的解决方案,我正在寻找。它与我的图像一起工作正常,但是当我添加新的图像时,就会发生这种情况。

function openModal() {
  document.getElementById('myModal').style.display = "block";
}

function closeModal() {
  document.getElementById('myModal').style.display = "none";
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
  slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}

https://jsfiddle.net/crookymnster/wk0jrz9s/

1 个答案:

答案 0 :(得分:1)

currentSlide(1)

那就是问题所在。如果将正确的索引传递给该函数,则可以在单击缩略图时看到较大的图像。看着你的小提琴。这是更新的小提琴

https://jsfiddle.net/ywpzh8v2/