Auf fast jeder Webseite ist der nahtlose Skrolleneffekt JS zu sehen. Einige mögen Plug-Ins sein, aber in der Tat ist es relativ einfach, Original-JavaScript zu verwenden.
Die Hauptsache ist, JS -Standortwissen zu nutzen.
1.Rennerhtml: Setzen oder abrufen das HTML -Tag des Elements
2.Scrollleft: Stellen Sie den Abstand zwischen der linken Grenze des Objekts und dem linken Ende des aktuell sichtbaren Inhalts im Fenster ein oder
3.Offsetwidth: Setzen oder erhalten Sie die Breite der angegebenen Etikett
4.SetInterval (): Stellen Sie die Methode fest, um regelmäßig zu starten
5.ClearInterval (); Löschen Sie den Timer
Reproduktionsbild:
Sneak: Demo
Die Codekopie lautet wie folgt:
<! DocType html>
<html lang = "en">
<kopf>
<meta charset = "utf-8">
<title> JavaScript Scroll Production </title>
</head>
<body>
<Styles>
/*Contrent*/
*{{
Rand: 0;
Polsterung: 0;
}
Img {max-Width: 100%;}
.Container{
Max-Breite: 620px;
Rand: 0 Auto;
Padding-Top: 50px;
}
.Text-center {text-align: center;}
.List-inline li {
Anzeige: Inline-Block;
}
.Hide {display: keine;}
HR {
Rand: 20px 0;
}
.Etikett{
Hintergrundfarbe: #CCC;
Polsterung: 5px 0;
}
.Tag li {
Polsterung: 0 10px;
Border-Links: 1PX Solid #fff;
Cursor: Zeiger;
}
.Tag li: Erstkind {
Grenze links: transparent;
}
.Tag li.active {
Hintergrundfarbe: #ddd;
}
.scrollen{
Position: Relativ;
Polsterung: 10px;
Randboden: 20px;
Hintergrundfarbe: #ddd;
}
.wickeln{
Überlauf: versteckt;
}
.Inhalt{
Min-Width: 3000px;
Höhe: 200px;
}
.Content ul {
float: links;
}
.Content ul li {
Anzeige: Inline-Block;
Max-Width: 200px;
}
#prev,#Weiter {
Breite: 50px;
Höhe: 50px;
Rand: -25px;
Hintergrundfarbe: #CCC;
Zeilenhöhe: 50px;
Text-Align: Mitte;
Cursor: Zeiger;
}
#prev {
Position: absolut;
links: 0;
Top: 50%;
Border-Radius: 0 25px 25px 0;
}
#nächste{
Position: absolut;
Rechts: 0;
Top: 50%;
Border-Radius: 25px 0 0 25px;
}
</style>
<div>
<h1> Bildscrollenproduktion </h1>
<hr>
<div>
<div id = "Wrap">
<div id = "content">
<ul id = "list1">
<li> <img src = "Freelance.gif"> </li>
<li> <img src = "button.gif"> </li>
<li> <img src = "load.gif"> </li>
<li> <img src = "Straw.gif"> </li>
</ul>
<ul id = "list2">
</ul>
</div>
</div>
<div id = "prev">
vorläufig
</div>
<div id = "next">
nächste
</div>
</div>
</div>
<Script>
var wrack = document.getElementById ('Wrap');
var list1 = document.getElementById ('list1');
var list2 = document.getElementById ('list2');
var prev = document.getElementById ('prev');
var next = document.getElementById ('next');
// Erstellen Sie eine Kopie der Inhaltsliste
list2.innerhtml = list1.innerhtml;
// nach links wechseln
Funktion scroll () {
if (Wrap.Scrollleft> = list2.Offsetwidth) {
Wrap.Scrollleft = 0;
}
anders{
Wrap.Scrollleft ++;
}
}
timer = setInterval (scrollen, 1);
// Verwenden Sie ClearInterval () für den Mausaufenthalt
Wrap.onmouseover = function () {
ClearInterval (Timer);
}
Wrap.onmouseout = function () {
timer = setInterval (scrollen, 1);
}
// nach links beschleunigen
Funktion scroll_l () {
if (Wrap.Scrollleft> = list2.Offsetwidth) {
Wrap.Scrollleft = 0;
}
anders{
Wrap.Scrollleft ++;
}
}
// nach rechts scrollen
Funktion scroll_r () {
if (Wrap.Scrollleft <= 0) {
Wrap.Scrollleft+= list2.Offsetwidth;
}
anders{
Wrap.Scrollleft--;
}
}
prev.onclick = function () {
ClearInterval (Timer);
ändern (0)
}
next.onclick = function () {
ClearInterval (Timer);
Änderung (1)
}
Funktionsänderung (r) {
if (r == 0) {
timer = setInterval (scroll_l, 60);
Wrap.onmouseout = function () {
timer = setInterval (scroll_l, 60);
}
}
if (r == 1) {
Timer = setInterval (scroll_r, 60);
Wrap.onmouseout = function () {
Timer = setInterval (scroll_r, 60);
}
}
}
</script>
</body>
Sehr prägnant und praktischer Code, bitte verschönern Sie ihn nach Ihren Projektanforderungen.