Nahtloses Scrollen ist ein Spezialeffekt, der häufig in Projekten verwendet wird. Es gibt auch viele Beispielcodes im Internet. Hier teile ich mit Ihnen einen relativ einfachen und praktischen Code mit guter Kompatibilität. Bitte studieren Sie es sorgfältig.
HTML -Code:
Die Codekopie lautet wie folgt:
<</span> html>
<</span> head lang = "en">
<</span> meta charset = "utf-8">
<</span> title> nahtloser scroll </</span> title>
<</span> script src = "js/0010.js"> </</span> Skript>
<</span> link rel = "stylesheet" type = "text/css" href = "css/0010.css"/>
</</Span> head>
<</span> Körper>
<</span> a href = "javaScript:"> links zu Fuß </</span> a>
<</span> a href = "JavaScript:"> Gehen Sie rechts </</span> a>
<</span> div id = "div1">
<</span> ul>
<</span> li> <</span> img src = "image/1.jpg"> </</span> li>
<</span> li> <</span> img src = "image/2.jpg"> </</span> li>
<</span> li> <</span> img src = "image/3.jpg"> </</span> li>
<</span> li> <</span> img src = "image/4.jpg"> </</span> li>
</</Span> ul>
</</Span> div>
</</Span> Körper>
</</Span> html>
CSS -Code
Die Codekopie lautet wie folgt:
*{{
Rand: 0;
Polsterung: 0;
}
#div1 {
Überlauf: versteckt;
Hintergrund: Blau;
Position: Relativ;
Breite: 600px;
Höhe: 150px;
Rand: 100px Auto;
}
#div1 ul {
Position: absolut;
links: 0px;
Oben: 0px;
Listenstil: Keine;
}
#div1 ul li {
float: links;
}
#div1 ul li img {
Breite: 150px;
Höhe: 150px;
}
JS: Code
Die Codekopie lautet wie folgt:
window.onload = function () {
var odiv = document.getElementById ('div1');
var Oul = odiv.getElementsByTagName ('ul') [0];
var ali = Oul.getElementsByTagName ('li');
var timer = null;
var speed = 2; // steuern die Bildlaufgeschwindigkeit und -richtung
OUL.INNERHTML = OUL.INNERHTML+OUL.INNERHTML;
Oul.Style.width = ali [0] .Offsetwidth*ali.length+'px';
Timer = setInterval (Bewegung, 30);
odiv.onmouseover = function () {// Maus in Tentative
ClearInterval (Timer);
};
odiv.onmouseout = function () {// Maus aus und weiter scrollen
Timer = setInterval (Bewegung, 30);
}
document.getElementsByTagName ('a') [0] .onclick = function () {
Geschwindigkeit = -2;
}
document.getElementsByTagName ('a') [1] .onclick = function () {
Geschwindigkeit = 2;
}
Funktion move () {// Bildscrollen
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';
}
}
Ist der Effekt nicht sehr gut?