调整幻灯片以仅响应单个按键

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>

Answer 1

您找到的脚本依赖于 HTML 中的内联事件处理程序，这将使添加新内容变得很麻烦。另一个问题是样式更改是硬编码的。像

这样写

ba[i].style.background = "rgba(0,0,0,.1)";

和

ba[bi].style.background = "#999";

这不是一种面向未来的编码方式。

下面是通过设置CSS class names实现相同布局和过渡效果的实现。您可以通过编写一个添加和删除 class 名称的函数来改进这一点，或者您可以让 jQuery 让 .addClass() and .removeClass().

为您工作

这是一个独立的示例，它响应鼠标在气泡上的点击以及左右光标键上的按键。 keydownFired 标志用于防止每次按键发生多个按键事件。

var contentItems = [  // Fill this array with the desired slide content.
  '<h2> Zoo animals </h2> <p> Giraffes have long necks and small horns. </p>',
  '<h2> All about cheese </h2> <p> Cheddar cheese is orange or white. </p>',
  '<h2> Weather forecast </h2> <p> It may rain. </p> <p> It may shine. </p>',
  '<h2> Rivalry </h2> <p> Puma and Adidas were founded by brothers. </p>'
];

var classNames = {
  slide: {
    default: 'slide',
    active: 'slide active'
  },
  bubble: { 
    default: 'bubble',
    active: 'bubble active'
  }
};

window.onload = function () {
  var currentSlide;
  var bubbleClick = function () {
    if (currentSlide) {
      currentSlide.className = classNames.slide.default;
      currentSlide.bubble.className = classNames.bubble.default;
    }
    currentSlide = this.slide;
    currentSlide.className = classNames.slide.active;
    this.className = classNames.bubble.active;
  };
  var slides = contentItems.map(function (content, index) {
        var slide = document.createElement('div'),
            bubble = document.createElement('div');
        slide.className = classNames.slide.default;
        slide.innerHTML = content;
        slide.index = index;    // The index will help with keydown events.
        slide.bubble = bubble;  // The slide and the bubble point to each
        bubble.slide = slide;   //  other to ease event handling.
        document.getElementById('slides').appendChild(slide);
        bubble.className = classNames.bubble.default;
        document.getElementById('bubbles').appendChild(bubble);
        bubble.onclick = bubbleClick;
        return slide;
      });
  slides[0].bubble.onclick();
  var keydownFired = false;
  window.onkeyup = function () {
    keydownFired = false;
  }
  window.onkeydown = function (event) {
    if (keydownFired) {         // Allow just one keydown event each time
      return;                   //  the user presses a key.
    }
    keydownFired = true;
    var code = event.which;
    if (code == 37) {
      var left = (currentSlide.index + slides.length - 1) % slides.length;
      slides[left].bubble.onclick();
    } else if (code == 39) {
      var right = (currentSlide.index + 1) % slides.length;
      slides[right].bubble.onclick();
    }
  };
};

* {
  box-model: border-box;
}
#slideshow {
  width: 650px;
  height: 250px;
  margin: 50px auto;
  border: 1px solid #aaa;
}
#bubbles {
  text-align: center;
}
.bubble {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 24px 10px 0px 10px;
  background: rgba(0, 0, 0, .1);
  border: 2px solid #999;
  border-radius:100%;
  font-size: 17px;
  text-decoration: none;
  transition: background 0.3s linear 0s;
  cursor: pointer;
}
.bubble.active {
  background: #999;
}
#slides {
  position: relative;
}
.slide {
  font-family: Arial, sans-serif;
  position: absolute;
  width: 650px;
  opacity: 0;
  transition: opacity 0.3s linear 0s;
}
.slide.active {
  height: 100%;
  opacity: 1;
}
.slide h2 {
  text-align: center;
  color: #7ea800;
}
.slide p {
  font-size: 17px;
  line-height: 1.5em;
  padding: 10px 50px;
  color: #777;
}

<div id="slideshow">
  <div id="bubbles"></div>
  <div id="slides"></div>
</div>

调整幻灯片以仅响应单个按键

Adapt slide show to respond to single key presses only

html

javascript

jquery

slideshow

css-transitions