Ensuite, je vais commencer la partie la plus essentielle, qui consiste à écrire un programme javascript. Notre idée est que nous pouvons définir un groupe d'images (plusieurs images). Lorsque la page apparaît, la première image sera affichée en premier et la deuxième image sera préchargée 5 secondes après le chargement de la première image, si la deuxième image est chargée. L'image est également chargée et nous commençons à passer automatiquement à la deuxième image. À ce moment-là, la troisième image est préchargée. Si nous chargeons la troisième image dans les 5 secondes, nous passerons automatiquement à la troisième image et la lecture continue. jusqu'à ce que le dernier recommence depuis le début. Bien sûr, cela se joue automatiquement. Nous permettons également aux utilisateurs de jouer manuellement en avant et en arrière.
Tout d'abord, le problème que nous devons résoudre est le préchargement des images, car cela détermine la fluidité du processus de commutation et la perfection du processus de lecture. Il est très simple de précharger une image. Il suffit de créer une nouvelle variable d'instance de l'image dans la mémoire et de pointer la variable vers une image. De cette façon, notre navigateur chargera automatiquement l'image de. préchargement. Écrit en javascript, cela ressemble à ceci :
var myImage = new Image()
myImage.src = "someImage.gif"
Ensuite, il faut aussi savoir si l'image est chargée ? S'il est chargé, nous l'afficherons. S'il n'est pas chargé, une erreur se produira. Nous devons donc modifier le code ci-dessus et ajouter deux instructions, donc ce JavaScript devient le suivant :
var img = new Image()
img.onload = doReadyImage
img.onerror = doErrorDisplay
img.src = "someImage.gif"
Nous avons ajouté les événements onload et onerror de l'image, qui représentent respectivement s'il faut précharger et précharger les événements d'erreur. Ces deux phrases doivent figurer devant l'instruction img.src. Sinon, le préchargement de l'image se déroulera mal.
La dernière étape est notre programme de changement d'image. Auparavant, nous avons examiné les différents effets des filtres de conversion Filter en CSS, nous utilisons ici l'effet aléatoire nommé 23. Vous trouverez ci-dessous ce que nous avons écrit pour cet effet dans le programme JavaScript d'IE :
if (document. images.slideShow.filters)
{
document.images.slideShow.filters[0].Stop()
document.images.slideShow.filters[0].Apply()
// Utiliser un effet de transition aléatoire document.images.slideShow.filters.revealTrans.transition=23
}
document.images.slideShow.src = sSource
// Commencer à exécuter l'effet de conversion
si (document.images.slideShow.filters)
document.images.slideShow.filters[0].Play()