javascript - 视频幻灯片

Question

我试图弄清楚为什么我的“后退”按钮无法正常工作。似乎我做错的唯一一件事就是为 previousSlide 编写函数。希望有人可以提供帮助。请参阅下面的代码：

$(document).ready(function() {



 $(function(){
     var counter = 0;
     var videos = [
         {videoURL: 'media/SLIDE1.mp4'},
         {videoURL: 'media/SLIDE2.mp4'},
         {videoURL: 'media/SLIDE3.mp4'},
         {videoURL: 'media/SLIDE4.mp4'},
         {videoURL: 'media/SLIDE5.mp4'},
         {videoURL: 'media/SLIDE6.mp4'},
         {videoURL: 'media/SLIDE7.mp4'},
         {videoURL: 'media/SLIDE8.mp4'},
         {videoURL: 'media/SLIDE9.mp4'}
     ]; 

     $('#next').click(updateSlide);

     function updateSlide() { 
         console.log(counter);
                  console.log(videos[counter]);
       $('video').attr('src', videos[counter].videoURL);

       if (counter < videos.length - 1) {
          counter++;
       } else {
        counter = 0;
       }

       //if you leave this uncommented it always increments counter, regardless of what you did above
       //counter++;

     }

     $('#previous').click(previousSlide);


     function previousSlide() { 
         console.log(counter);
                  console.log(videos[counter]);
       $('video').attr('src', videos[counter].videoURL);

       if (counter > 0) {
          counter--;
       } else {
        counter = 0;
       }
     }


     //Enables Left and Right Key Navigation
     $(document).keydown(function(e){

        if ( e.which === 37 ) { //left

            $('#previous').click(); 

        } else if ( e.which === 39 ) { //right

            $('#next').click();
    }
  });

});

谢谢你的帮助！

亚当

Answer 1

减量前：

  function previousSlide() { 
      if (counter > 0) {
         counter--;
      } else {
         counter = 0;
      }

      $('video').attr('src', videos[counter].videoURL);

 }

为你的updateSlide函数做类似的事情（之前增加），你应该已经准备好了。似乎这只是一个错误的错误。

 function updateSlide() { 
    console.log(counter);
    console.log(videos[counter]);

    if (counter < videos.length - 1) {
      counter++;
    } else {
    counter = 0;
    }

    $('video').attr('src', videos[counter].videoURL);

}