调整幻灯片放映仅响应单键按下

Question

我在这里找到了幻灯片放映的代码：

https://www.developphp.com/video/JavaScript/Bubbles-Content-Slideshow-Application-JavaScript-CSS-HTML

我想添加箭头键功能，以便幻灯片向左或向右滚动，具体取决于是按下左箭头键还是右箭头键。目前它一直循环播放幻灯片，但我希望每次按键只滚动一次。

<style>
#bubblebox{ width:650px; height:250px; margin:50px auto; border:1px solid    
#AAA; }
#bubbles{ width:auto; margin:0px auto; text-align:center; }
#bubbles > div{ display:inline-block; width:10px; height:10px; margin:24px    
10px 0px 10px; background:rgba(0,0,0,.1); text-align:center; border:2px   
solid #999; border-radius:100%; font-size:17px; text-decoration:none;   
transition: background 0.3s linear 0s; cursor:pointer; }
#bubblecontent{ margin:0px auto; transition:opacity 0.3s linear 0s; font-   
family: Arial;}
#bubblecontent > h2{ text-align:center; color:#7EA800; }
#bubblecontent > p{ font-size:17px; line-height:1.5em; padding:20px 50px;   
color:#777; }
</style>
<script>
// This simple function returns object reference for elements by ID
function _(x){return document.getElementById(x);}
// Variables for bubble array, bubble index, and the setInterval() variable
var ba, bi=0, intrvl;
// bca - Bubble Content Array. Put your content here.
var bca = [
'<h2>Heading Number 1</h2><p>Content for section 1</p>',
'<h2>Heading Number 2</h2><p>Content for section 2</p>',
'<h2>Heading Number 3</h2><p>Content for section 3</p>',
'<h2>Heading Number 4</h2><p>Content for section 4</p>'
];
// This function is triggered by the bubbleSlide() function below
function bubbles(bi){
// Fade-out the content
_("bubblecontent").style.opacity = 0;
// Loop over the bubbles and change all of their background color
for(var i=0; i < ba.length; i++){
    ba[i].style.background = "rgba(0,0,0,.1)";
}
// Change the target bubble background to be darker than the rest
ba[bi].style.background = "#999";
// Stall the bubble and content changing for just 300ms
setTimeout(function(){
    // Change the content
    _("bubblecontent").innerHTML = bca[bi];
    // Fade-in the content
    _("bubblecontent").style.opacity = 1;
}, 300);
}
// This function is set to run every 5 seconds(5000ms)
function bubbleSlide(){
bi++; // Increment the bubble index number
// If bubble index number is equal to the amount of total bubbles
if(bi == ba.length){
    bi = 0; // Reset the bubble index to 0 so it loops back at the beginning
}
// Make the bubbles() function above run
bubbles(bi);
}
// Start the application up when document is ready
window.addEventListener("load", function(){
// Get the bubbles array
ba = _("bubbles").children;
// Set the interval timing for the slideshow speed
intrvl = setInterval(bubbleSlide, 5000);
});

document.onkeydown = function(event) {
 if (!event)
      event = window.event;
 var code = event.keyCode;
 if (event.charCode && code == 0)
      code = event.charCode;
 switch(code) {
      case 37:  
     ba = _("bubbles").children;
          break;
      case 39: 
 ba = _("bubbles").children;
 }
 event.preventDefault();
};

</script>
<div id="bubblebox">
<div id="bubbles">
<div onclick="bubbles(0); clearInterval(intrvl);" style="background:#999;">   
</div>
<div onclick="bubbles(1); clearInterval(intrvl);"></div>
<div onclick="bubbles(2); clearInterval(intrvl);"></div>
<div onclick="bubbles(3); clearInterval(intrvl);"></div>
</div>
<div id="bubblecontent">
<h2>Heading Number 1</h2>
<p>Content for section 1</p>
</div>
</div>