Question

我有一些我通过自举设计的卡片，在悬停时，图像覆盖了卡片。我希望每次重新悬停时能够循环显示3个不同的图像。我已经做到了这一点，在悬停图像时会出现，但它不会循环，因为它一次拉动所有图像而只有'portrait_02.jpg'由于其定位而显示，我不确定在哪里下一步。帮助将不胜感激。

HTML + JS

                        var containerOne = document.getElementById("myImage");
                        var urls = [ 'portrait_01.jpg',
                                     'portrait_02.jpg',
                                     'portrait_03.jpg'];

                        for(i=0; i < urls.length; i++){
                          containerOne.insertAdjacentHTML('beforeend', '<img class="oImageSize" src="../images/cards/' + urls[i] + '">');
                        }

    .overlayContainer {
     position: relative;
     width: 50%;
    }

    .overlay {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     overflow: hidden;
     width: 100%;
     height: 0;
     transition: .5s ease;
    }

    .overlayContainer:hover .overlay {
     height: 100%;
     opacity: 1;
    }


    .oImageSize {
     display: block;
     width: 320px;
     height: 320px;
    }

    .oImage {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     text-align: center;
    }

                      <div class="card overlayContainer" style="width: 20rem;">

                        <div class="overlay">
                          <div id="myImage" class="oImage">
                          </div>
                        </div>

                        <div class="card-header"> <h2> Portraits </h2>
                        <h5 class="card-title"> $80-45mins-20prints</h5>
                      </div>
                        <div class="card-body">
                          <p class="card-text">
                            <ul>
                              <li> Lipsum </li>
                              <li> Lipsum </li>
                              <li> Lipsum </li>
                              <li> Lipsum </li>
                              <li> Lipsum </li>
                            </ul>
                          </p>
                        </div>
                      </div>

Answer 1

for循环通过并逐个插入一个图像。您需要在中间暂停替换图像。像这样的东西。未经测试。

int counter=1;
while(true){
     containerOne.html('<img class="oImageSize" src="../images/cards/' + urls[counter] + '">');
sleep(1000);
    counter++;
    counter=counter%3;
}

//https://www.phpied.com/sleep-in-javascript/
function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

Answer 2

有趣。我不知道你能不能适应这个。它确实循环。这对我来说很有教育意义。

<!DOCTYPE html>
<html>
<head>
<style>
#img1 { display:none; position:fixed; left:100px; top:10px; }
#img2 { display:none; position:fixed; left:100px; top:10px; }
#img3 { display:none; position:fixed; left:100px; top:10px; }
</style>
<script>
  "use strict";
  var nimg = 1;
function show() {
  var imgx = "img" + nimg;
  var elt = document.getElementById(imgx);
  elt.style = "display:block;";
}
function hide() {
  var imgx = "img" + nimg;
  var elt = document.getElementById(imgx);
  elt.style = "display:none;";
  nimg = 1 + nimg % 3;
}
</script>
</head>
<body>
<div onmouseover="show();" onmouseout="hide();" >
  MouseOverMe
</div>
<div id="img1"><img src="img1.jpg"/></div>
<div id="img2"><img src="img2.jpg"/></div>
<div id="img3"><img src="img3.jpg"/></div>
</body>
</html>

在悬停时循环浏览不同的图像

2 个答案: