Effekt: Bewegen Sie die Maus in das Bild und stoppen
Kann das Scrollen nach links oder rechts einstellen
Die Codekopie lautet wie folgt:
<style type = "text/css">
* {{
Rand: 0;
Polsterung: 0;
}
#div1 {
Überlauf: versteckt;
Breite: 712px;
Höhe: 108px;
Rand: 100px Auto;
Position: Relativ;
Hintergrund: Rot;
}
#div1 ul {
Position: absolut;
links: 0;
Top: 0;
}
#div1 ul li {
float: links;
Breite: 178px;
Höhe: 108px;
Listenstil: Keine;
}
</style>
Die Codekopie lautet wie folgt:
<body>
<a href = "JavaScript:;"> Gehen Sie links </a>
<a href = "JavaScript:;"> Gehen Sie nach rechts </a>
<div id = "div1">
<ul>
<li>
<img src = "img/nahtlos scroll/1.jpg"/>
</li>
<li>
<img src = "img/nahtlos scroll/2.jpg"/>
</li>
<li>
<img src = "img/nahtlos scroll/3.jpg"/>
</li>
<li>
<img src = "img/nahtlos scroll/4.jpg"/>
</li>
</ul>
</div>
</body>
Das obige ist ein einfaches Layout, und das folgende JavaScript -Code ist der Haupt -JavaScript -Code
Die Codekopie lautet wie folgt:
<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';
Funktion 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 + Speed + 'PX';
}
var timer = setInterval (Bewegung, 30);
odiv.onmouseover = function () {
ClearInterval (Timer);
};
odiv.onmouseout = function () {
Timer = setInterval (Bewegung, 30);
};
document.getElementsByTagName ('a') [0] .onclick = function () {
Geschwindigkeit = -2;
};
document.getElementsByTagName ('a') [1] .onclick = function () {
Geschwindigkeit = 2;
};
}
</script>
Lassen Sie mich die Idee kurz erklären:
Setzen Sie zuerst UL. Insgesamt gibt es 8 Bilder insgesamt Oul.innerhtml += Oul.innerhtml;
Berechnen Sie die Breite von UL auf die tatsächliche Breite von Li*8
Verstecken Sie den zusätzlichen Inhalt später
Hinweis: Oul.offsetLeft ist definitiv negativ
Verpassen Sie also nicht das negative Zeichen, wenn Sie ein Urteil fällen
Die Codekopie lautet wie folgt:
if (Oul.Offsetleft <-oul.Offsetwidth / 2) {
Oul.Style.Left = '0';
}
Dieser Abschnitt bedeutet, dass das Bild auf halbem Weg scrollen und das Bild schnell zurückziehen. Da das Programm zu schnell ausgeführt wird, ist es fast unmöglich, nahtloses Scrollen zu sehen.
Verwenden Sie schließlich die variable Geschwindigkeit, um das Scrollen in der linken und rechten Richtungen zu steuern.
Der obige Code implementiert nur die grundlegendsten Funktionen, und Freunde können sie auf dieser Grundlage weiter verbessern.