responsiveslides.js - 각 슬라이드에 특정 시간 제한 지정

Question

responsiveslides.js가있는 슬라이더를 만들었습니다. 그것은 5 개의 다른 이미지 슬라이드를 포함하고 있습니다.

일반적으로 예를 들어 4000 밀리 초의 시간 제한을 지정할 수 있지만 슬라이더의 모든 단일 이미지에 할당됩니다.

각 이미지 슬라이드에 다른 시간 초과를 할당하고 싶습니다. 예 :

slide 1: timeout = 10000 
slide 2: timeout = 2000 
slide 3: timeout = 4000 
slide 4: timeout = 4000 
slide 5: timeout = 2000 

어떻게 구할 수 있습니까? 가능한가? 도움을 주셔서 감사 드리며 영어 불쌍한 분께 죄송합니다.

나는 Timctran이 제안한 코드를 편집했지만 잘못되었습니다. 이 코드의 문제점을 확인하는 데 도움을 줄 수 있습니까?

나는 제안한대로 코드를 변경하려고 시도했다. 자바 스크립트 코드에서 경험이 없으므로 슬라이더가 더 이상 작동하지 않으므로 이전 버전으로 되돌려졌습니다. 다음은 코드 수정 방법입니다.

// Array to enter timeout values. 
     var desiredTimeouts = [10000, 2000, 4000, 4000, 2000]; 
    // Auto cycle 
    if (settings.auto) { 
     startCycle = function (i) { 
      rotate = setTimeout(function() { 
      // Clear the event queue 
      $slide.stop(true, true); 

      var idx = index + 1 < length ? index + 1 : 0; 

      // Remove active state and set new if pager is set 
      if (settings.pager || settings.manualControls) { 
      selectTab(idx); 
      } 

      slideTo(idx); 
     startCycle(index); 
    }, desiredTimeout[i]); 
}; 

     // Init cycle 
     startCycle(index); 
    } 

    // Restarting cycle 
    restartCycle = function() { 
     if (settings.auto) { 
     // Stop 
     clearTimeout(rotate); 
     // Restart 
     startCycle(index); 
     } 
    }; 

코드 수정에 도움을 주시면 감사하겠습니다. 감사!

Answer 1

rotate (줄 232)이라는 기능이 responsiveslides.js에 있습니다. 스크립트에 대한 변경의

// Array to enter timeout values. 
var desiredTimeouts = [10000, 2000, 4000, 4000, 2000]; 
// Auto cycle 
if (settings.auto) { 
    startCycle = function (i) { 
    rotate = setTimeout(function() { 
     // Clear the event queue 
     ... 
     slideTo(idx); 
     startCycle(index); 
    }, desiredTimeout[i]); 
    }; 
    // Init cycle 
    startCycle(index); 
} 
... 
    clearTimeout(rotate); 
    startCycle(index); 
... 
    clearTimeout(rotate); 

요약 :

1. 이 desiredTimeouts를 포함하는 줄을 추가를 코드의 일부, 당신은 여기를 참조 변경합니다.
2. setInterval에서 setTimeout으로 변경되었습니다.
3. 기능 끝에 startCycle에 전화를 겁니다.
4. 는 startCycle에 인수로 불리는 제작 clearTimeout
5. index에 clearInterval의 두 인스턴스를 변경.

Answer 2

Timctran 덕분에 최종 해결책을 얻었습니다.

responsiveslides.js 파일을 열고 227 행 (responsiveslides.js 버전 1.54)으로 이동하십시오.

아래 코드로 기존 코드를 수정하십시오. 원하는 시간 초과를 쉼표로 구분하여 var desiredTimeout에 삽입하십시오.

// Array to enter timeout values. 
     var desiredTimeout = [10000, 4500, 4500, 4500]; 

    // Auto cycle 
    if (settings.auto) { 
     startCycle = function (i) { 
      rotate = setTimeout(function() { 
       // Clear the event queue 
       $slide.stop(true, true); 

       var idx = index + 1 < length ? index + 1 : 0; 

       // Remove active state and set new if pager is set 
       if (settings.pager || settings.manualControls) { 
        selectTab(idx); 
       } 

      slideTo(idx); 
      startCycle(index); 
      }, desiredTimeout[i]); 
     }; 

     // Init cycle 
     startCycle(index); 
    } 

    // Restarting cycle 
    restartCycle = function() { 
     if (settings.auto) { 
     // Stop 
     clearTimeout(rotate); 
     // Restart 
     startCycle(index); 
     } 
    }; 

    // Pause on hover 
    if (settings.pause) { 
     $this.hover(function() { 
     clearTimeout(rotate); 
     }, function() { 
     restartCycle(); 
     }); 
    }