时间戳

首页 > 解决方案 > 在悬停时循环浏览不同的图像

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

问题描述

我有一些我通过引导程序设计的卡片，在悬停时，一张图片覆盖了卡片。我希望每次重新悬停时都能循环浏览 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>

标签： javascriptcssimagehover

解决方案

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;
    }
  }
}

推荐阅读