Dans cet article, nous réalisons l'effet du roulement de publicité en mode JS pur pour votre référence. Le contenu spécifique est le suivant
Affichons d'abord le produit fini:
Tout d'abord, le style de page Web:
#demo {background: #fff; débordement: caché; Border: 1px en pointillé #ccc; Largeur: 1280px; hauteur: 200px; } #demo img {border: 3px solide # f2f2f2; } #indemo {float: gauche; Largeur: 800%; } # Demo1 {float: Left; } # Demo2 {float: Left; }La disposition est la suivante:
<div id="demo"> <div id="indemo"> <div id="demo1"> <a href="#"><img src="banner.jpg" /></a> <a href="#"><img src="banner2.jpg" /></a> </div> <div id="demo2"></div> </div> </div>
Implémentation spécifique de JS:
<cript> var speed = 10; var tab = document.getElementById ("Demo"); var tab1 = document.getElementById ("Demo1"); var tab2 = document.getElementById ("Demo2"); tab2.InnerHtml = tab1.innerHtml; Marquee () {if (tab2.offsetwidth-tab.scrollleft == 0) tab.scrollleft- = tab1.offsetwidthelSe {tab.scrollleft ++; }} var myMar = setInterval (Marquee, Speed); tab.OnMouseOver = function () {ClearInterval (MyMar)}; tab.OnMouseout = function () {myMar = setInterval (Marquee, Speed)}; </ Script>Que noter ici est:
Scrollleft représente la largeur de la page cachée à gauche de la barre de défilement lorsque la page utilise la barre de défilement pour faire défiler vers la droite.
Offsetwidth est la largeur visible de l'objet, qui enveloppe la barre de défilement et est égal aux bords, qui changera avec la taille d'affichage de la fenêtre.
La méthode setInterval () peut appeler une fonction ou calculer une expression en fonction de la période spécifiée (en millisecondes). La méthode setInterval () continuera d'appeler la fonction jusqu'à ce que ClearInterval () soit appelé ou que la fenêtre soit fermée.
Il est facile de comprendre si vous comprenez cette implémentation spécifique.
Le principe d'implémentation est le suivant: Copiez d'abord une copie du contenu qui doit être défilé. Lorsque le contenu affiché par la div à droite est de la même largeur que le contenu caché sur l'ombre gauche, le contenu caché sur l'ombre gauche du conteneur parent est affiché, de sorte que le contenu caché sur l'ombre gauche est affiché et que le contenu caché à droite soit réchauffé. Si le contenu sur le côté droit affiche moins que le contenu masqué sur le côté gauche, continuez à dire que le conteneur parent veut se déplacer vers la gauche pour atteindre la cachette. Une chose à noter est que puisque deux images sont placées sur le côté gauche en même temps, lorsque le côté droit est à moitié affiché, l'ombre cachée sur le côté gauche sera complètement affichée. Étant donné que le contenu affiché sur le côté droit est le même que le contenu du côté gauche, l'effet du défilement de boucle est obtenu.
Ce défilement lisse est obtenu.
Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.