이미지 URL에서 슬라이드 쇼를 만들기위한 jquery 플러그인

Question

요청은 간단하지만 Google은 어렵습니다. 여기 요구 사항은 다음과 같습니다

• 나는
• 내가는
• 내가 괜찮은 슬라이드 쇼 플러그인이 배열을 소비하고 나에게 슬라이드 쇼를 제공하려는 백업 HTML을 해달라고 이미지 URL과 JS 배열이
• 슬라이드 쇼는 키보드 내비게이션 (보너스) 사용을 지원합니다.

지금까지 복잡한 백킹 HTML과 CSS를 많이 필요로하는 슬라이드 쇼 플러그인이 많이 보였습니다. 그것은 어쨌든 슬라이드 쇼 플러그인에 의해 변형되기 위해서는이 html을 만드는 것이 다소 어리석은 것처럼 보입니다.

또한 슬라이드 쇼 플러그인 뒤에있는 코드가 얼마나 좋을지 몰랐습니다. 이런!

Answer 1

내가 개발 한 제품을 신속하게 조합 한 것입니다 (전혀 테스트하지 않았으며 단지 아이디어 용입니다). 어렵지 않아야합니다.

var imgs = ['a.png', 'b.png', 'c.png']; 

function Slideshow(img_list, container) { 
    var self = this; 
    var $slides = []; 
    var current = { 'ith': 0, '$slide': null }; 

    function initialize() { 
     // Create the images 
     img_list.map(function (i) { 
      $slides.push($('<img>').attr('src', i).hide().appendTo(container)); 
     });  

     current.$slide = $slides[0]; 
     current.ith = 0; 

     // Initialize binds (jquery hotkeys or something) 
     $(document).bind('keydown', '>', function() { 
      // Do stuff 
      self.next(); 
     }); 

     $(document).bind('keydown', '<', function() { 
      // Do stuff 
      self.prev(); 
     }); 

    }; 

    this.indexTo = function (i) { 
     current.$slide.hide(); 
     current.$slide = $slides[i]; 
     current.ith = i; 

     if (current.$slide ==== undefined) { 
      if (i < 0) { 
       current.$slide = $slides[$slides.length - 1]; 
       current.ith = $slides.length - 1; 
      } else { 
       current.$slide = $slides[0]; 
       current.ith = 0; 
      } 
     } 

     // Effects or something else 
     return current.$slide.show(); 
    }; 

    this.next = function() { 
     return self.indexTo(current.ith++); 
    }; 

    this.prev = function() { 
     return self.indexTo(current.ith--); 
    }; 

    initialize(); 
}; 

Answer 2

http://www.designfloat.com/의 지난 기사/항목을 살펴보십시오. 수행하려는 작업에 대한 훌륭한 jQuery 샘플이 많이 있습니다.

감사합니다,

르네 필론 키보드 탐색에 대한

Answer 3

몰라,하지만 난 this similar question에 접수 대답은 당신을 분류해야한다.

편집 : 키보드 탐색 기능도 포함되어 있습니다. 원하는 경우 참조 용으로 how I implemented it을 참조하십시오 (Folio 탭 클릭).

Answer 4

Cycle라는이 jQuery 플러그인은 내가 본 가장 멋진 슬라이드 쇼 중 하나 (즉, 라이트 박스 타입이다)이다. 문서를 살펴 보았지만 키보드 지원이나 이미지 배열을 사용할 수있는 옵션이없는 것 같지만 동적으로 더 많은 이미지를 추가하는 예가 있습니다. 어쨌든, 스스로 판단하십시오.