Перемещение по различным изображениям при наведении - PullRequest
Новая
       30

Перемещение по различным изображениям при наведении

0 голосов
/ 07 июня 2018

У меня есть несколько карт, которые я разработал с помощью начальной загрузки, после зависания изображение покрывает карту.Я хочу, чтобы можно было переключаться между 3 различными изображениями каждый раз, когда вы наводите курсор.Я сделал это так далеко, когда при наведении мыши изображение будет отображаться, однако оно не будет циклически проходить, потому что оно вытягивает все изображения одновременно, и только «портрет_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>

Ответы [ 2 ]

0 голосов
/ 08 июня 2018

Интересно.Я не знаю, сможешь ли ты это адаптировать или нет.Это делает цикл.Это было познавательно для меня. 

<!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>
0 голосов
/ 07 июня 2018

Цикл 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;
    }
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...