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> <li> <a href = "#"> <img src = "4.jpg" /> </a> </li> </ul> </ 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:
<cript> 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 est un nombre négatif oul.style. 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 (Timer); Timer = setInterval (fnmove, 30); oul.onMouseOver = function () {ClearInterval (Timer);}; oul.OnMouseout = function () {timer = setInterval (fnmove, 30); // Exécuter cette minuterie lorsque la souris est éloignée};}; </cript>Ce qui précède est les idées de défilement et le code sans couture basés sur JS partagés par l'éditeur. J'espère que cela peut vous aider. Si vous avez des questions, laissez-moi un message. L'éditeur vous répondra à temps. Merci beaucoup pour votre soutien pour le site Web du réseau Wulin!