다음으로 가장 핵심적인 부분인 자바스크립트 프로그램 작성을 시작하겠습니다. 우리의 아이디어는 사진 그룹(여러 장)을 정의할 수 있다는 것입니다. 페이지가 나타나면 첫 번째 사진이 먼저 표시되고 두 번째 사진이 로드된 후 5초 후에 두 번째 사진이 미리 로드됩니다. 사진도 로드되고 두 번째 사진으로 자동 전환되기 시작합니다. 이때 세 번째 사진이 미리 로드되어 있습니다. 5초 이내에 세 번째 사진을 로드하면 자동으로 세 번째 사진으로 전환되어 재생이 계속됩니다. 마지막이 처음부터 다시 시작될 때까지. 물론 자동으로 재생됩니다. 또한 사용자가 수동으로 앞으로 및 뒤로 재생할 수 있습니다.
우선, 우리가 해결해야 할 문제는 사진을 미리 로드하는 것입니다. 왜냐하면 이것이 전환 과정의 부드러움과 재생 과정의 완벽함을 결정하기 때문입니다. 그림을 미리 로드하는 것은 매우 간단합니다. 메모리에 그림의 새 인스턴스 변수를 만들고 이 방법으로 브라우저가 그림을 자동으로 로드합니다. 미리 로드 중입니다. 자바스크립트로 작성하면 다음과 같습니다:
var myImage = new Image()
myImage.src = "someImage.gif"
그러면 이미지가 로드되었는지도 알아야 합니까? 로드된 경우 표시합니다. 로드되지 않은 경우 오류가 발생합니다. 따라서 위의 코드를 변경하고 두 개의 명령문을 추가해야 하므로 이 JavaScript는 다음과 같습니다.
var img = new Image()
img.onload = doReadyImage
img.onerror = doErrorDisplay
img.src = "someImage.gif"
이미지의 onload 및 onerror 이벤트를 추가했습니다. 이는 각각 오류 이벤트를 미리 로드할지 여부를 나타냅니다. 이 두 문장은 img.src 문 앞에 와야 합니다. 그렇지 않으면 이미지 사전 로드가 잘못됩니다.
마지막 단계는 이미지 전환 프로그램입니다. 이전에는 CSS에서 필터 변환 필터의 다양한 효과를 검토했습니다. 여기서는 코드명 23을 사용합니다. 아래는 IE에서 이 효과에 대해 작성한 것입니다
. 이미지.슬라이드쇼.필터)
{
document.images.slideShow.filters[0].Stop()
document.images.slideShow.filters[0].Apply()
// 무작위 전환 효과 사용 document.images.slideShow.filters.revealTrans.transition=23
}
document.images.slideShow.src = s소스
//변환 효과 실행 시작
if (document.images.slideShow.filters)
document.images.slideShow.filters[0].Play()