Effet: déplacez la souris dans l'image et arrêtez de faire défiler, et la souris défile automatiquement
Peut ajuster le défilement vers la direction gauche ou droite
La copie de code est la suivante:
<style type = "text / css">
* {
marge: 0;
rembourrage: 0;
}
# div1 {
débordement: caché;
Largeur: 712px;
hauteur: 108px;
marge: 100px auto;
Position: relative;
Contexte: rouge;
}
# div1 ul {
Position: absolue;
à gauche: 0;
en haut: 0;
}
# div1 ul li {
flottant: à gauche;
Largeur: 178px;
hauteur: 108px;
Style de liste: aucun;
}
</ style>
La copie de code est la suivante:
<body>
<a href = "javascript :;"> Marche à gauche </a>
<a href = "javascript :;"> Marche à droite </a>
<div id = "div1">
<ul>
<li>
<img src = "IMG / Scroll sans couture / 1.jpg" />
</li>
<li>
<img src = "IMG / Scroll sans couture / 2.jpg" />
</li>
<li>
<img src = "IMG / Scroll sans couture / 3.jpg" />
</li>
<li>
<img src = "IMG / Scroll sans couture / 4.jpg" />
</li>
</ul>
</div>
</docy>
Ce qui précède est une disposition simple, et ce qui suit est le code JavaScript principal
La copie de code est la suivante:
<script type = "text / javascript">
window.onload = function () {
var odiv = document.getElementById ("div1");
var oul = odiv.getElementsByTagName ('ul') [0];
var ali = oul.getElementsByTagName ('li');
Var Speed = 2;
oul.innerhtml + = oul.innerhtml;
oul.style.width = ali [0] .offsetWidth * ali.length + 'px';
fonction move () {
if (oul.offsetleft <-oul.offsetwidth / 2) {
oul.style.left = '0';
}
if (oul.offsetleft> 0) {
oul.style.left = -oul.offsetwidth / 2 + 'px';
}
oul.style.left = oul.offsetleft + vitesse + 'px';
}
var timer = setInterval (move, 30);
odiv.onmouseOver = function () {
ClearInterval (temporisateur);
};
odiv.onmouseout = function () {
timer = setInterval (move, 30);
};
document.getElementsByTagName ('A') [0] .OnClick = function () {
vitesse = -2;
};
document.getElementsByTagName ('A') [1] .OnClick = function () {
vitesse = 2;
};
}
</cript>
Permettez-moi d'expliquer brièvement l'idée:
Tout d'abord, définissez UL. Il y a 8 images en total oul.innerhtml + = oul.innerhtml;
Calculez la largeur de UL à la largeur réelle de Li * 8
Masquer le contenu supplémentaire plus tard
Remarque: oul.offsetleft est définitivement négatif
Alors ne manquez pas le signe négatif lorsque vous portez un jugement
La copie de code est la suivante:
if (oul.offsetleft <-oul.offsetwidth / 2) {
oul.style.left = '0';
}
Cette section signifie que l'image fait défiler à mi-chemin et retire rapidement l'image. Parce que le programme s'exécute trop rapidement, il est presque impossible de voir un défilement transparent.
Enfin, utilisez la vitesse variable pour contrôler le défilement dans les directions gauche et droite.
Le code ci-dessus implémente uniquement les fonctions les plus élémentaires, et les amis peuvent continuer à les améliorer sur cette base.