자바 스크립트 timelapse-effect : 초당 30 개의 이미지를 표시합니다. (자세한 내용은 읽기)

Question

365 일 동안 하루에 한 번씩 찍은 사진의 '시각 일기'를 포트폴리오 사이트에서 작성했습니다. 그는 내가 이것을 시간 저 효과 조각에 넣기를 원한다. Flash 사용에 대해 생각했지만 결국 JavaScript를 선택했습니다.

어떤 일이 일어날 필요가 있는가? 이미지는 전환이나 아무 것도없고 정말로 이미지 - 이미지 - 이미지 등으로 정말로 빠르게 순환합니다. 약 30/fps 정도입니다. 깜박이는 이미지를 클릭하면 선택한 이미지에서 멈추어 사용자가 볼 수 있습니다. 다시 클릭하면 슬라이드 쇼가 다시 시작됩니다.

제 문제는 제가 JavaScript에 대해 가장 안좋은 PHP/XHTML/CSS 녀석입니다. 나는 그것을 어떤 페이지에도 행복하게 통합 할 수 있지만, JavaScript를 코딩하는 것은 저를 괴롭 히고 있습니다.

<!-- Code for slideshow --> 
<!-- Found on http://www.webdeveloper.com/forum/showthread.php?t=81441 --> 

<SCRIPT LANGUAGE="JavaScript"> 
<!-- Begin 
// Set slideShowSpeed (milliseconds) 
var slideShowSpeed = 3000; 
// Duration of crossfade (seconds) 
var crossFadeDuration = 3; 
// Specify the image files 
var Pic = new Array(); 
// to add more images, just continue 
// the pattern, adding to the array below 

Pic[0] = '1.jpg' 
Pic[1] = '2.jpg' 
Pic[2] = '3.jpg' 
Pic[3] = '4.jpg' 
Pic[4] = '5.jpg' 
Pic[5] = '6.jpg' 
Pic[6] = '7.jpg' 
Pic[7] = '8.jpg' 
Pic[8] = '9.jpg' 
Pic[9] = '10.jpg' 
Pic[10] = '11.jpg' 
Pic[11] = '12.jpg' 
Pic[12] = '13.jpg' 
Pic[13] = '14.jpg' 
Pic[14] = '15.jpg' 
Pic[15] = '16.jpg' 
Pic[16] = '17.jpg' 
Pic[17] = '18.jpg' 
Pic[18] = '19.jpg' 
Pic[19] = '20.jpg' 

// do not edit anything below this line 
var t; 
var j = 0; 
var p = Pic.length; 
var preLoad = new Array(); 
for (i = 0; i < p; i++) { 
preLoad[i] = new Image(); 
preLoad[i].src = Pic[i]; 
} 
function runSlideShow() { 
if (document.all) { 
document.images.SlideShow.style.filter="blendTrans(duration=2)"; 
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"; 
document.images.SlideShow.filters.blendTrans.Apply(); 
} 
document.images.SlideShow.src = preLoad[j].src; 
if (document.all) { 
document.images.SlideShow.filters.blendTrans.Play(); 
} 
j = j + 1; 
if (j > (p - 1)) j = 0; 
t = setTimeout('runSlideShow()', slideShowSpeed); 
} 
// End --> 
</script> 

인가가 어떤 : 전환 효과 등 그것은 HTML에있어하지만 당신은 내가 확신 코드를 추측 할 수와 - 자신의 홈페이지에

, 나는 기본적인 슬라이드 쇼를 표시하는 데 사용이 코드가 이 전환 코드를 수정하여 모든 전환 효과를 끄고 클릭 할 때 재생을 멈추게하거나 다시 시작하십시오. 그렇지 않으면 다른 코드에 대한 참조가 도움이됩니다.

감사합니다.

잭

Answer 1

IE 전용 코드를 사용하고있는 것 같습니다. MooTools (내 개인 즐겨 찾기), jQuery 또는 Prototype + script.aculo.us과 같은 전용 JavaScript 라이브러리에서 다양한 효과 모듈을 사용하는 것이 좋습니다.

당신은 단순히 명확 할 시간 제한 t해야한다, 슬라이드 쇼를 중지하려면

clearTimeout(t); 

또한, setTimeout의 첫 번째 매개 변수를 인용해서는 안된다. 함수 참조를 전달하십시오 :

setTimeout(runSlideShow, slideShowSpeed);