问html5演示

EN

  function nextSlide() {
      if (buildNextItem()) {
         return;
      }

      if (curSlide < slideEls.length - 1) {
         curSlide++;
         updateSlides();
      }
   }

   function prevSlide() {
       if (curSlide > 0) {
           curSlide--;
           updateSlides();
        }
   }

   function updateSlides() {
       for (var i = 0; i < slideEls.length; i++) {
          switch (i) {
            case curSlide - 2:
              updateSlideClass(i, 'far-past');
              break;
            case curSlide - 1:
              updateSlideClass(i, 'past');
              break;
            case curSlide: 
              updateSlideClass(i, 'current');
              break;
            case curSlide + 1:
              updateSlideClass(i, 'next');      
              break;
            case curSlide + 2:
              updateSlideClass(i, 'far-next');      
              break;
            default:
              updateSlideClass(i);
              break;
            }
         } 

         triggerLeaveEvent(curSlide - 1);
         triggerEnterEvent(curSlide);

         window.setTimeout(function() {
         // Hide after the slide
            disableSlideFrames(curSlide - 2);
         }, 301);

         enableSlideFrames(curSlide - 1);
         enableSlideFrames(curSlide + 2);

         if (isChromeVoxActive()) {
             speakAndSyncToNode(slideEls[curSlide]);
         }  

         updateHash();
     }
  }

  <section id=slides>
      <atricle></article>
      <atricle></article>
      <atricle></article>
  </section>