principe:
1. Donnez une position absolue pour la séparer du flux de document, réglé à gauche sur 0, fourrez l'image dans UL, écrivez une fonction "mobile", la fonction de fonction peut faire en sorte que la gauche d'UL soit à droite à une vitesse positive,
2. Définissez une minuterie pour faire en sorte que la fonction "mobile" exécute toutes les 30 millisecondes (paramètres variables)
3. Parce que la longueur de l'UL sera "exécutée", le contenu de UL, c'est-à-dire IMG, peut être doublé.
oul.innerhtml + = oul.innerhtml;
4. À l'heure actuelle, parce que le contenu de l'UL augmente, sa largeur augmentera également et le nombre d'images affichées peut changer ou être incertaine selon le projet réel.
oul.style.width = oli.length * oli [0] .offsetWidth + 'px';
5. Ajouter du code à la fonction "mobile".
5.1 À l'heure actuelle, UL se déplace vers la droite. Lorsque Offsetleft de UL> 0, tirez UL vers la "moitié de la largeur d'UL", c'est-à-dire permettre à UL de se déplacer vers la droite sans limite.
if (oul.offsetleft> 0) {oul.style.left = -oul.offsetwidth / 2 + 'px';}5.2 Lorsque UL se déplace vers la gauche et que son décalage coule la moitié de la largeur de UL, retirez l'ensemble UL vers la gauche initiale: 0;
if (oul.offsetleft <-oul.offsetWidth / 2) {oul.style.left = 0; }Sur le code:
HTML:
<div id = "box"> <ul> <li> <a href = "#"> <img src = "1.jpg" /> </a> </li> <li> <a href = "#"> <img src = "2.jpg" /> </a> </li> <li> <a href = "#"> <img src = "2.jpg" /> </a> </li> <li> <a href = "#"> <img src = "3.jpg" /> </a> </li> </ div>
CSS:
* {margin: 0; padding: 0;} #box {width: 480px; hauteur: 110px; Border: 1px Solide rouge; marge: 100px auto; débordement: caché; Position: relative; } #box ul {position: absolue; à gauche: 0; En haut: 5px;} #box ul li {list-style: aucun; flottant: à gauche; Largeur: 100px; hauteur: 100px; Padding-Left: 16px; } #box ul li img {width: 100px; hauteur: 100px;}JS:
<Script> window.onload = function () {var odIv = document.getElementById ('div1'); var oul = odiv.getElementsByTagName ('ul') [0]; var oli = oul.getElementsByTagName ('li'); var aa = document.getElementsByTagName ('a'); var ispeed = 10; // Soit Ul à déplacer oul.innerhtml + = oul.innerhtml; oul.style.width = oli.length * oli [0] .offsetWidth + 'px'; aa [0] .OnClick = function () {ispeed = -10; }; aa [1] .OnClick = function () {ispeed = 10; }; fonction fnmove () {if (oul.offsetleft <-oul.offsetwidth / 2) {// Le nombre négatif est parce que la gauche d'Ul est un nombre négatif oul.style.left = 0; } else if (oul.offsetleft> 0) {oul.style.left = -oul.offsetWidth / 2 + 'px'; } oul.style.left = oul.offsetleft + iSpeed + 'px'; // L'ensemble UL se déplace vers la droite}; var timer = null; ClearInterval (temporisateur); timer = setInterval (fnmove, 30); oul.onMouseOver = function () {ClearInterval (Timer); }; oul.onmouseout = function () {timer = setInterval (fnmove, 30); // Exécuter cette minuterie lorsque la souris est déplacée}; }; </cript>S'il y a des erreurs, veuillez les corriger.
Le code d'implémentation simple de défilement sans couture ci-dessus (recommandé) est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.