Toute page Web que vous ouvrez verra essentiellement des images de défilement sans couture ou du carrousel, telles que Taobao et 360 Page d'accueil officielle du site officiel
En observant ces images de carrousel, vous pouvez constater que les images peuvent être changées d'avant en arrière, alors comment faites-vous?
Il existe deux façons principales d'atteindre le carrousel ou le défilement transparent. L'une consiste à afficher ou à masquer l'image en modifiant la lumière et l'obscurité de l'image, c'est-à-dire des images transparentes, et l'autre est d'afficher l'image dans la zone visible à travers un cadre en mouvement. Les deux méthodes utiliseront la même chose, c'est-à-dire la minuterie.
Il existe deux types de minuteries dans JavaScript, 1.SetInterval (); 2.SetTimeout (); Il existe également deux méthodes de fermeture des minuteries, ClearInterval () et ClearTimeout (). La différence entre les deux minuteries est que le premier peut être exécuté plusieurs fois, tandis que le second ne peut être exécuté qu'une seule fois.
Cette fois, je ne parlerai que de défilement transparent, et le prochain article présente l'image du carrousel.
Le code pour implémenter un défilement simple transparent est le suivant:
/ * Code complet * / <! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8" /> <style> div {position: relatif; largeur: 630px; hauteur: 220px; bordure: solide 2px 2px noir; débordement: caché;} ul {position: absolu; en haut: 10px; gauche: 0;} img {largeur: 200px; hauteur: 200px; float: gauche; marge-droite: 10px; bordure: 2px solide jaune;} li {list-style: Aucun; marge: 0; padding: 0;} ul {margin: 0; padding: 0;} </ style> <script> window.onload = function () {var oul = document.getElementById ("main"); var ali = oul.getElementsByTagName ("img"); OInput = document.getElementsByTagName ("Input") [0]; Oul.InnerHtml + = oul.InnerHtml; Oul.Style.Width = Ali.length * Ali [0] .OffsetWidth + "PX"; var " timer = null; setInterval (function () {oul.style.left = oul.offsetleft-8 + "px"; if (oul.offsetleft <-oul.offsetwidth / 2) {oul.style.left = "0px";}}, 30);}; id = "main"> <li> <img src = "../ img / 1.jpg"> </li> <li> <img src = "../ img / 2.jpg"> </ li> <li> <img src = "../ img / 2.jpg"> </li> <li> <impermé src = "../ img / 3.jpg"> </li> <li> <img src = "../ img / 4.jpg"> </li> <li> <img src = "../ img / 9.jpg"> </li> </ul> </ div> </div> </ body> </html>/ --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- /
La disposition de défilement sans couture est relativement simple. Ce qui suit explique principalement le contenu JS:
Tout d'abord, obtenez UL et Li respectivement, puis copiez le contenu dans UL, modifiez dynamiquement la largeur de UL via JS (si vous souhaitez faire défiler de manière transparente vers le haut et vers le bas, modifier sa largeur) et enfin activer le minuteur. Dans le code, UL se déplace à 8 pixels vers la gauche toutes les 30 microsecondes, et lorsque la marge gauche visible de UL est inférieure à la moitié de la longueur totale de UL, elle devient 0. Parce que l'ordinateur fonctionne très rapidement, ce changement est presque impossible à ressentir. Tout ce que nous voyons, c'est l'image qui se déplace constamment vers le mouvement gauche et sans fin.
Ce qui précède est le code JS de défilement transparent qui vous est présenté par l'éditeur. J'espère que ce sera utile à tous!