将键盘导航添加到幻灯片中

Question

我的页面上有一个模态幻灯片，我希望它在按下'esc'键时关闭，并在使用右键和左键时更改为下一个图像。如果用户在图像之外单击模态的任何部分时关闭模态也会有所帮助。

有人可以帮助我!!

爪哇：

<script type="text/javascript">



function openModal() {

  document.getElementById('myModal').style.display = "block";

}


function closeModal() {

  document.getElementById('myModal').style.display = "none";

}




var slideIndex = 1;

showSlides(slideIndex);



function plusSlides(n) {

  showSlides(slideIndex += n);

}



function currentSlide(n) {

  showSlides(slideIndex = n);

}



function showSlides(n) {

  var i;

  var slides = document.getElementsByClassName("mySlides");

  var dots = document.getElementsByClassName("demo");

  var captionText = document.getElementById("caption");

  if (n > slides.length) {slideIndex = 1}

  if (n < 1) {slideIndex = slides.length}

  for (i = 0; i < slides.length; i++) {

      slides[i].style.display = "none";

  }

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

  captionText.innerHTML = dots[slideIndex-1].alt;

}


</script>

.img{

    width: 85%;

	margin-top: 2%;
  }
  
  .img:hover{

cursor: pointer;

opacity: 0.9;

}

.img1{

    height: 100%;

	display: block;

	margin-left: auto;

	margin-right: auto;
  
  }
  
  .mySlides {

  display: none;

  height: 70%;

}
.prev, .next {

  cursor: pointer;

  position: relative;

  width: auto;

  padding: 0.7%;

  z-index: 2;

  color: white;

  font-weight: 200;

  font-size: 125%;

  transition: 0.6s ease;

  border-radius: 30% 0 0 30%;

  -webkit-user-select: none;

}
.demo{

	

	 -ms-transform: scale(1.8, 1.8); /* IE 9 */

    -webkit-transform: scale(1.8, 1.8);

	height: 100%;

}

.demo:hover{

cursor: pointer;

opacity: 0.6;

}

.column{

	display: inline-block;

	overflow: hidden;

	margin-right: auto;

	margin-left: auto;

	width: 10.50%;

	height: 60%;

	

}

#slideshow{

	margin-right: auto;

	margin-left: auto;

	margin-top: 1%;

	width: 70%;

	height: 15%;

	text-align: center;

	display: block;

	margin-bottom: 5%;


}

<div id="content">

       
       <img class="img" src="london1.jpg" alt="London" onclick="openModal();currentSlide(1)"/>

      <p>Paradisum, 2016.</p>

      <img class="img" src="london2.jpg" alt="London" onclick="openModal();currentSlide(2)"/>

      <p>Ecclesia, 2016.</p>

      <img class="img" src="london3.jpg" alt="London" onclick="openModal();currentSlide(3)"/>



      <img class="img" src="london4.jpg" alt="London" onclick="openModal();currentSlide(4)"/>

    

      <img class="img" src="london5.jpg" alt="London" onclick="openModal();currentSlide(5)"/>

      <p>55 Broadway, 2016.</p>

      <img class="img" src="london6.jpg" alt="London" onclick="openModal();currentSlide(6)"/>

      <p>Kiosk, 2016.</p>


    

      

   <div id="myModal" class="modal">

  <span class="close cursor" onclick="closeModal()">&times;</span>

  <div class="modal-content">



       <div class="mySlides">

      <img class="img1" alt="London" src="london1.jpg"/>

    </div>

    <div class="mySlides">

      <img class="img1" alt="London"  src="london2.jpg"/>

    </div>

    <div class="mySlides">

      <img class="img1" alt="London" src="london3.jpg"/>

    </div>

    <div class="mySlides">

      <img class="img1" alt="London" src="london4.jpg"/>

    </div>

    <div class="mySlides">

      <img class="img1" alt="London" src="london5.jpg"/>

    </div>

    <div class="mySlides">

      <img class="img1" alt="London" src="london6.jpg"/>

    </div>



    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>

    <a class="next" onclick="plusSlides(1)">&#10095;</a>



    <div class="caption-container">

      <p id="caption"> CAPTION</p>

    </div>



<div id="slideshow">


    <div class="column">

      <img class="demo" src="london1.jpg" onclick="currentSlide(1)" alt="Paradisum, 2016"/>

    </div>

    <div class="column">

      <img class="demo" src="london2.jpg" onclick="currentSlide(2)" alt="Ecclesia, 2016"/>

    </div>

    <div class="column">

      <img class="demo" src="london3.jpg" onclick="currentSlide(3)"/>

    </div>

    <div class="column">

      <img class="demo" src="london4.jpg" onclick="currentSlide(4)"/>

    </div>

    <div class="column">

      <img class="demo" src="london5.jpg" onclick="currentSlide(5)" alt="55 Broadway, 2016"/>

    </div>

    <div class="column">

      <img class="demo" src="london6.jpg" onclick="currentSlide(6)" alt="Kiosk, 2016"/>

    </div>
</div>
</div>
</div>
</div>