將鍵盤導航添加到幻燈片

Question

我在我的頁面上有一個模式幻燈片，我希望它在按'esc'鍵時關閉，並且在使用右鍵和左鍵時也切換到下一個圖像。如果模式在用戶單擊模式中除圖像之外的任何部分時關閉，也會有所幫助。

有人可以幫助我！

的Java：

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

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

 
cursor: pointer; 
 

 
opacity: 0.9; 
 

 
} 
 

 
.img1{ 
 

 
    height: 100%; 
 

 
\t display: block; 
 

 
\t margin-left: auto; 
 

 
\t 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{ 
 

 
\t 
 

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

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

 
\t height: 100%; 
 

 
} 
 

 
.demo:hover{ 
 

 
cursor: pointer; 
 

 
opacity: 0.6; 
 

 
} 
 

 
.column{ 
 

 
\t display: inline-block; 
 

 
\t overflow: hidden; 
 

 
\t margin-right: auto; 
 

 
\t margin-left: auto; 
 

 
\t width: 10.50%; 
 

 
\t height: 60%; 
 

 
\t 
 

 
} 
 

 
#slideshow{ 
 

 
\t margin-right: auto; 
 

 
\t margin-left: auto; 
 

 
\t margin-top: 1%; 
 

 
\t width: 70%; 
 

 
\t height: 15%; 
 

 
\t text-align: center; 
 

 
\t display: block; 
 

 
\t 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>

Answer 1

您可以在kayboard使用事件監聽並得到鍵碼設置操作，這樣的：

document.addEventListener('keydown', function(e) { 
    if(e.keyCode == 37) { 
     //your code 
    } 
    //your code 
}); 

你可以看到所有的鍵碼here