单击缩略图后，javascript滑块不透明度对主图像的影响

时间：2018-12-17 15:10:49

标签： javascript html css

我想在单击相应缩略图后出现主图像时，在此javascript滑块上创建一个平滑的不透明度更改。 我猜这与发生“ onclick”事件的javascript调用css代码有关，但是我在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>

2 个答案:

答案 0 :(得分：2)

您的代码有两个问题。

首先，从animation:opacity 2s; CSS类中删除.bigimage。每次将动画应用于对象时，动画仅发生一次。将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>

答案 1 :(得分：1)

我想为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>

相关问题
最新问题