单击缩略图后主图像上的javascript滑块不透明度效果答案

【问题标题】：javascript slider opacity effect on main image after a click on a thumbnail单击缩略图后主图像上的javascript滑块不透明度效果
【发布时间】：2018-12-17 15:10:48
【问题描述】：

当单击相应缩略图后出现主图像时，我想在此 javascript 滑块上创建平滑的不透明度更改。我想这与在“onclick”时调用 css 代码的 javascript 有关，但我在 javascript 方面的技能让我理解了逻辑，但到目前为止我无法自己创建它，这非常令人沮丧。

我已经在我的 css 文件中添加了一个不透明动画，希望它可以是一个好的开始，它实际上可以用缩略图来解决问题，当我用箭头键在它们之间循环时，它们会获得不透明效果。

但是当通过单击缩略图或使用左/右箭头键更改主图像时，我没有设法在主图像上执行此操作。谁能帮我回答这个问题？

var lastImg = 'image1'; //Set initial thumbnail and preview
document.getElementById('image0').src = document.getElementById(lastImg).src;
document.getElementById(lastImg).className = "thumb selected";

function preview(img) {
  document.getElementById(lastImg).className = "thumb normal";
  img.className = "thumb selected";
  document.getElementById('image0').src = img.src;
  lastImg = img.id;
}

function previewOnKey(e) {
  /* left key */
  if (e.keyCode == 37) {
    var previousImg = document.getElementById(lastImg).previousElementSibling;
    if (previousImg) {
      preview(previousImg);
    }
  }

  /* right key */
  if (e.keyCode == 39) {
    var nextImg = document.getElementById(lastImg).nextElementSibling;
    if (nextImg) {
      preview(nextImg);
    }
  }
}

document.onkeydown = previewOnKey;

html,
body {
  height: 100vh;
  background: url(../images/vagues.svg);
  background-repeat: no-repeat;
  background-position: 1% 75%;
}

body {
  padding: 0;
  margin: 0;
}

.container {
  height: 100vh;
  display: grid;
  grid-gap: 6px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
}

.nom {
  display: grid;
  grid-column: 3/8;
  grid-row: 1;
  color: #f9423ab5;
  font-family: 'Montserrat';
  font-size: 3.2vw;
  align-self: center;
  animation: couleur 8s;
}

a {
  display: grid;
  align-items: center;
  color: black;
  text-decoration: none;
  font-family: helvetica;
  font-size: 1.4vw;
  transform: rotate(-40deg);
  letter-spacing: 0.1rem;
}

.accueil {
  display: grid;
  grid-column: 10;
  grid-row: 1;
}

.contact {
  display: grid;
  grid-column: 11;
  grid-row: 1;
}

a:hover {
  text-decoration: none;
  color: coral;
}

.bigimage {
  width: 61vw;
  grid-column: 3/11;
  grid-row: 2/5;
  margin-top: 16px;
  animation: opacity 2s;
}

.thumb {
  width: 3vw;
  height: 2vw;
  margin-left: 18px;
  margin-bottom: 15px;
  align-self: center;
}

.thumb:hover {
  cursor: pointer;
  opacity: 0.1;
}

.thumbnails {
  grid-column: 1/3;
  grid-row: 2/5;
  margin-top: 16px;
}

.normal {}

.selected {
  animation: opacity 2s;
}

@keyframes opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<img id="image0" class="preview normal bigimage" />

<div class="thumbnails">
  <img id="image1" class="thumb normal" src="https://placekitten.com/g/150/80" alt="image1" onclick="preview(this)" />
  <img id="image2" class="thumb normal" src="https://placekitten.com/g/151/80" alt="image2" onclick="preview(this)" />
  <img id="image3" class="thumb normal" src="https://placekitten.com/g/152/80" alt="image3" onclick="preview(this)" />

</div>

【问题讨论】：

您好 Rachel，首先感谢您对我问题的英文表述的帮助和更正，我的英语说得不像我希望的那样流利。我现在正在添加 css。
你为什么使用一个空的“普通”类？填充或删除它 - 它使您的代码混乱。另外，您还没有在您的 CSS 中列出一个名为 preview 的类？
如果你对 jquery 持开放态度（推荐），fadeIn 和 fadeOut 对于编写快速平滑过渡非常方便
谢谢 Rachel，“to clutter”我不知道这个动词的英文。出于两个原因，我宁愿只使用 javascript。首先是我喜欢了解我在做什么，我发现从 javascript 开始比直接使用 jquery 更有启发性。更重要的是我知道我正在建设的网站会在网速很慢的地区使用，所以如果我想为这些用户腾出时间，我想最好不要为他们加载jquery文件。

标签： javascript html css

【解决方案1】：

您的代码有两个问题。

首先，从.bigimage CSS 类中删除animation:opacity 2s;。每次将动画应用于对象时，动画只会发生一次。将animation:opacity 2s; 应用于预览图像意味着动画在页面加载时出现，但不会再次出现。

其次，在您的preview 方法中添加以下代码：

document.getElementById('image0').className = "preview normal bigimage";
// Force the browser to "redraw" the element.
void document.getElementById('image0').offsetWidth;
document.getElementById('image0').className = "preview normal bigimage selected";

这会从预览中删除 selected CSS 类，然后重新添加 selected CSS 类，“等待”动画帧。

var lastImg = "image1"; //Set initial thumbnail and preview
document.getElementById('image0').src = document.getElementById(lastImg).src;
document.getElementById(lastImg).className = "thumb selected";

function preview(img) {
  document.getElementById(lastImg).className = "thumb normal";
  img.className = "thumb selected";
  document.getElementById('image0').src = img.src;
  document.getElementById('image0').className = "preview normal bigimage";
  // Force the browser to "redraw" the element.
  void document.getElementById('image0').offsetWidth;
  document.getElementById('image0').className = "preview normal bigimage selected";
  lastImg = img.id;
}

function previewOnKey(e) {
    /* left key */
    if (e.keyCode == 37) {
        var previousImg = document.getElementById(lastImg).previousElementSibling;
        if (previousImg) {
            preview(previousImg);
        }
    }

    /* right key */
    if (e.keyCode == 39) {
        var nextImg = document.getElementById(lastImg).nextElementSibling;
        if (nextImg) {
            preview(nextImg);
        }
    }
}

document.onkeydown = previewOnKey;

html,
body {
  height: 100vh;
  background: url(../images/vagues.svg);
  background-repeat: no-repeat;
  background-position: 1% 75%;
}

body {
  padding: 0;
  margin: 0;
}

.container {
  height: 100vh;
  display: grid;
  grid-gap: 6px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
}

.nom {
  display: grid;
  grid-column: 3/8;
  grid-row: 1;
  color: #f9423ab5;
  font-family: 'Montserrat';
  font-size: 3.2vw;
  align-self: center;
  animation: couleur 8s;
}

a {
  display: grid;
  align-items: center;
  color: black;
  text-decoration: none;
  font-family: helvetica;
  font-size: 1.4vw;
  transform: rotate(-40deg);
  letter-spacing: 0.1rem;
}

.accueil {
  display: grid;
  grid-column: 10;
  grid-row: 1;
}

.contact {
  display: grid;
  grid-column: 11;
  grid-row: 1;
}

a:hover {
  text-decoration: none;
  color: coral;
}

.bigimage {
  width: 61vw;
  grid-column: 3/11;
  grid-row: 2/5;
  margin-top: 16px;
}

.thumb {
  width: 3vw;
  height: 2vw;
  margin-left: 18px;
  margin-bottom: 15px;
  align-self: center;
}

.thumb:hover {
  cursor: pointer;
  opacity: 0.1;
}

.thumbnails {
  grid-column: 1/3;
  grid-row: 2/5;
  margin-top: 16px;
}
 
.normal {
  
}
 
.selected {
  animation:opacity 2s;
  
}



@keyframes opacity {
    0%   { opacity: 0; }
  100% { opacity: 1; }
}

<img id="image0" class="preview normal bigimage" />

<div class="thumbnails">
  <img id="image1" class="thumb normal" src="https://placekitten.com/g/150/80" alt="image1" onclick="preview(this)"/>
  <img id="image2" class="thumb normal" src="https://placekitten.com/g/151/80" alt="image2" onclick="preview(this)" />
  <img id="image3" class="thumb normal" src="https://placekitten.com/g/152/80" alt="image3" onclick="preview(this)" />
 
</div>






</body>
</html>

【讨论】：

您好“S.Walker”，感谢您的回答。我做了你建议我做的事，但实际上即使我更改了 CSS 并将你发送到我的 javascript 的代码添加到我的 javascript 中，也没有任何变化，它的行为就像我没有更改任何东西一样。
如果您单击我答案底部的“运行代码 sn-p”，是否可以正常工作？ - 另外，你用的是什么浏览器？
其实它在 Chrome 和 Safari 中有效，但在 firefox 中无效，我不知道为什么，因为我已经在 Firefox 中看到了 css 不透明动画。
这里的“运行代码sn-p”不起作用，它适用于第一个图像和第二个图像，但之后不再适用。我更改了浏览器以检查是否是原因，但我在 chrome 上添加了与在 firefox 中相同的结果。
我更新了我的答案。我根据：css-tricks.com/restart-css-animation 将window.setTimeout... 替换为void document.getElementById('image0').offsetWidth;

【解决方案2】：

我想为pure javascript slider 发布此解决方案。它不包括您的图像，它只是一种替代“幻灯片”而不是“onclick”解决方案。即使您不使用它，它也可能对您检查/理解 javascript 有所帮助。

请尽量保持您的 HTML 和 CSS 整洁——从您的 HTML 中删除不必要的类，并从您的 CSS 文件中删除空的或未使用的类。您的网站将运行感谢您的优化！ :)

希望对你有帮助

//slide and change opacity
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1
  }
  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";
  setTimeout(showSlides, 2000); // Change image every 2 seconds
}

.mySlides {
  text-align:center;
  display: none;
}

/* Slideshow container */

img {
  width: 350px;
  height: auto;
  position: relative;
  margin: 0 auto;
  
}

/* The dots/bullets/indicators */

.dot {
  margin-top:10px;
  display:inline-block;
  position:relative;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  transition: background-color 0.6s ease;
}

.text {
  color: green;
  display: block;
}

.active {
  background-color: #717171;
}

/* Fading animation */

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {
  .text {
    font-size: 11px
  }
}

<body>

  <div class="mySlides fade">
    <img id="image1" src="https://placekitten.com/g/150/80" alt="image1" onclick="preview(this)" />
 
    <div class="text">kitten 1</div>
    <div class="dot"><!--img class="thumb normal" onclick="preview(this)"/ alt="1/3"-->1/3</div>

  </div>

  <div class="mySlides fade">
   
    <img id="image2" src="https://placekitten.com/g/151/80" alt="image2" />
    <div class="text">kitten 2</div>
     <div class="dot"><!--img class="thumb normal" onclick="preview(this)"/ alt="2/3"-->2/3</div>
  </div>

  <div class="mySlides fade">
   
    <img id="image3" src="https://placekitten.com/g/152/80" alt="image3" onclick="preview(this)" />
    <div class="text">kitten 3</div>
     <div class="dot"><!--img class="thumb normal" onclick="preview(this)"/ alt="3/3"-->3/3</div>
  </div>

</body>

【讨论】：

非常感谢 Rachel，我以前不知道 stackoverflow，我觉得像你这样的人抽出时间以如此友好和完整的方式向其他人解释他们所知道的内容真是不可思议。当然，它会帮助我理解 Javascript 并建立我的网站。我把这个滑块放在口袋里翻页，;-)。
@Guillaume13 好东西。乐意效劳。（不过，您可以为许多答案投票；））.. 欢迎来到堆栈.. 欢乐时光！