Next, I'm going to start the most core part, which is writing a javascript program. Our idea is that we can define a group of pictures (several pictures). When the page appears, the first picture will be displayed first and the second picture will be preloaded. 5 seconds after the first picture is loaded, if the second picture The picture is also loaded, and we start to automatically switch to the second picture. At this time, the third picture is preloaded. If we load the third picture within 5 seconds, we will automatically switch to the third picture. , and the playback continues until the last one starts from the beginning again. Of course, this plays automatically. We also allow users to manually play forward and backward.
First of all, the problem we have to solve is the preloading of pictures, because this determines the smoothness of the switching process and the perfection of the playback process. It is very simple to preload a picture. We only need to create a new instance variable of the picture in the memory and point the variable to a picture. In this way, our browser will automatically load the picture. This is the picture. of preloading. Written in javascript it looks like this:
var myImage = new Image()
myImage.src = "someImage.gif"
Then, we also need to know whether the image is loaded? If it is loaded, we will display it. If it is not loaded, an error will occur. So we have to change the above code and add two statements, so this JavaScript becomes as follows:
var img = new Image()
img.onload = doReadyImage
img.onerror = doErrorDisplay
img.src = "someImage.gif"
We added the onload and onerror events of the image, which represent whether to preload and preload error events respectively. These two sentences must be in front of the img.src statement. Otherwise, image preloading will go wrong.
The last step is our image switching program. Previously, we reviewed the various effects of Filter conversion filters in CSS. Here we use the random effect codenamed 23. Below is what we wrote for this effect in IE. JavaScript program:
if (document.images.slideShow.filters)
{
document.images.slideShow.filters[0].Stop()
document.images.slideShow.filters[0].Apply()
// Use random transition effect document.images.slideShow.filters.revealTrans.transition=23
}
document.images.slideShow.src = sSource
//Start executing the conversion effect
if (document.images.slideShow.filters)
document.images.slideShow.filters[0].Play()