Как создать отображение массива по функции?

Question

Я дал четырем изображениям одинаковое имя класса и поместил их в div.В настоящее время изображение раньше настроено на отображение с четырьмя настройками, которые не отображаются в CSS.Я пытаюсь, чтобы изображения отображались поверх мыши через Javascript.Я могу сделать это через CSS, но хотел бы увидеть это через Javascript.Ниже приведен код:

HTML

var first = document.getElementById('first');
var Larrow = document.getElementById('arrow1');
var Rarrow = document.getElementById('arrow2');
var slidpics = document.getElementByClassName('crash');
var stop = document.getElementsByClassName('picbac');
var display = 0;

first.onmouseover = function() {
  if (x = 0, x < slidpics.length, x++) {
    slidpics[display].style.display = 'inline-flex';
    display++;
  }
}

stop.onmouseout = function() {
  var y;
  if (y = 0, y < slidpics.length, y++) {
    slidpics[display].style.display = 'none';
    display++;
  }
}

<div class = "picbac"></div>
<img id="first" src="../Pics  /January_2019/crash1.jpg" alt="A picture you can't see">
<p id="arrow1"></p>
<img id="show1" class="crash" src="../Pics/January_2019/crash2.jpg" alt="Another picture you can't see">
<img id="show2" class="crash" src="../Pics/January_2019/crash3.jpg" alt="You must be blind">
<img id="show3" class="crash" src="../Pics/January_2019/crash4.jpg" alt="Or we're not linking up">
<p id="arrow2"></p>
<img id="show4" class="crash" src="../Pics/January_2019/crash5.jpg" alt="Still checkin?">

Answer 1

Есть много способов сделать это, но это один из способов, если вы не возражаете против jquery.

// show the first image in the set as default
$("#wrapper > .content:first-of-type").children("img").show();

// show images on mouse enter
$(".content p").on("mouseenter", function(){
  $(this).closest(".content").children("img").show();
});

// hide the images on mouse out
$(".content p").on("mouseout", function(){
  $(this).closest(".content").children("img").hide();
});

.content img{
  display: none;
}

.content p:hover{
  cursor: pointer;
  color: crimson;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
  <div id="wrapper">
  <div class="content">
  <p>--></p>

    <img id="first" src="../Pics  /January_2019/crash1.jpg" alt="A picture you can't see">
  </div>

  <div class="content">
  <p class="arrow">--></p>
    <img id="show1" class="crash" src="../Pics/January_2019/crash2.jpg" alt="Another picture you can't see">
    <img id="show2" class="crash" src="../Pics/January_2019/crash3.jpg" alt="You must be blind">
    <img id="show3" class="crash" src="../Pics/January_2019/crash4.jpg" alt="Or we're not linking up">
  </div>

  <div class="content">
  <p class="arrow">--></p>

    <img id="show4" class="crash" src="../Pics/January_2019/crash5.jpg" alt="Still checkin?">
  </div>
</div>

Answer 2

Вам не нужен массив для достижения того, что вы описываете.

Используя JQuery с минимальным кодом, я использую стрелки для запуска fadeIn() изображений.

var imgsDiv = $("#picbac").children();

imgsDiv.on("mouseenter", function() {
  $(this.children[1]).fadeIn(500); //you can use show()
});

imgsDiv.on("mouseout", function() {
  $(this.children[1]).fadeOut(500);
});

.crash {
  display: none;
}

[id^=container]{
	border: 1px solid lightgrey;
  margin: 20px;
  width : 80vw;
}

p{
font-weight: 900;
}

img{
width: 50%; 
height: 50%; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="picbac">
  <div id="container1">
    <p id="arrow1">Show 1</p>
    <img id="show1" class="crash" src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="Another picture you can't see">
  </div>
  
  <div id="container2">
    <p id="arrow2">Show 2</p>
    <img id="show2" class="crash" src="https://www.gettyimages.co.uk/gi-resources/images/500px/983794168.jpg" alt="You must be blind">
  </div>
  
  <div id="container3">
    <p id="arrow3">Show 3</p>
    <img id="show3" class="crash" src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="Or we're not linking up">
  </div>
  
  <div id="container4">
    <p id="arrow4">Show 4</p>
    <img id="show4" class="crash" src="https://www.gettyimages.co.uk/gi-resources/images/500px/983794168.jpg" alt="Still checkin?">
  </div>
</div>

Надеюсь, это поможет.

Answer 3

Хороший способ - это исключить стиль из сценария и просто назначить класс для контейнера .picbac, чтобы показать .crash потомков с отображением: inline-flex

var first = document.getElementById('first');
var picbac = document.querySelector('.picbac');

first.addEventListener('mouseenter', function() {
  picbac.classList.add('show');
});
picbac.addEventListener('mouseleave', function() {
  picbac.classList.remove('show');
});

в mouseenter / mouseleave класс .show переключается на элемент .picbac, поэтому CSS может быть

.picbac .crash {
  display: none;
}

.picbac.show .crash {
  display: inline-flex;
}

Этот подход возможен, если ваши .crash изображения являются потомками .picbac элемент, и это значительно упрощает код и разъединяет логику (поведение и внешний вид).

Кодовая демонстрация