L'effet de défilement JS sans couture peut être vu sur presque toutes les page Web. Certains peuvent être des plug-ins, mais en fait, l'utilisation de JavaScript d'origine est relativement simple.
L'essentiel est d'utiliser les connaissances de la localisation JS.
1.InnerHTML: Définissez ou obtenez la balise HTML de l'élément
2.Scrollleft: réglez ou obtenez la distance entre la limite gauche de l'objet et l'extrémité la plus à gauche du contenu actuellement visible dans la fenêtre
3.Offsetwidth: définissez ou obtenez la largeur de l'étiquette spécifiée
4.SetInterval (): Définissez la méthode pour démarrer régulièrement
5.ClearInterval (); Effacer la minuterie
Image de reproduction:
Sneak: Demo
La copie de code est la suivante:
<! Doctype html>
<html lang = "en">
<adal>
<meta charset = "utf-8">
<Title> JavaScript Scroll Production </Title>
</ head>
<body>
<style>
/ * Conment * /
* {
marge: 0;
rembourrage: 0;
}
IMG {max-largeur: 100%;}
.récipient{
largeur maximale: 620px;
marge: 0 auto;
Tableau de rembourrage: 50px;
}
.Text-Center {Text-Align: Center;}
.List-inline li {
Affichage: bloc en ligne;
}
.Hide {affichage: aucun;}
heure{
marge: 20px 0;
}
.étiqueter{
Color d'arrière-plan: #ccc;
rembourrage: 5px 0;
}
.tag li {
rembourrage: 0 10px;
Border-Left: 1px solide #fff;
curseur: pointeur;
}
.Tag li: Premier enfant {
bordure-gauche: transparent;
}
.tag li.active {
Color d'arrière-plan: #DDD;
}
.rouleau{
Position: relative;
rembourrage: 10px;
marge-fond: 20px;
Color d'arrière-plan: #DDD;
}
.envelopper{
débordement: caché;
}
.contenu{
largeur min: 3000px;
hauteur: 200px;
}
.Content ul {
flottant: à gauche;
}
.Content ul li {
Affichage: bloc en ligne;
largeur maximale: 200px;
}
# prev, # suivant {
Largeur: 50px;
hauteur: 50px;
marge: -25px;
Color d'arrière-plan: #ccc;
hauteur de ligne: 50px;
Texte-aligne: Centre;
curseur: pointeur;
}
#prev {
Position: absolue;
à gauche: 0;
en haut: 50%;
Border-Radius: 0 25px 25px 0;
}
#suivant{
Position: absolue;
à droite: 0;
en haut: 50%;
Border-Radius: 25px 0 0 25px;
}
</ style>
<div>
<H1> Production de défilement d'image </H1>
<hr>
<div>
<div id = "wrap">
<div id = "contenu">
<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">
crévuré
</div>
<div id = "suivant">
suivant
</div>
</div>
</div>
<cript>
var wrap = document.getElementById ('wrap');
var list1 = document.getElementById ('list1');
var list2 = document.getElementById ('list2');
var prev = document.getElementById ('prev');
var next = document.getElementById ('suivant');
// Créer une copie de la liste de contenu
list2.innerhtml = list1.innerhtml;
// change vers la gauche
fonction Scroll () {
if (wrap.scrollleft> = list2.offsetwidth) {
wrap.scrollleft = 0;
}
autre{
wrap.scrollleft ++;
}
}
timer = setInterval (Scroll, 1);
// Utilisez ClearInterval () pour le séjour de la souris
wrap.onMouseOver = function () {
ClearInterval (temporisateur);
}
wrap.onMouseout = function () {
timer = setInterval (Scroll, 1);
}
// accélérer vers la gauche
fonction scroll_l () {
if (wrap.scrollleft> = list2.offsetwidth) {
wrap.scrollleft = 0;
}
autre{
wrap.scrollleft ++;
}
}
// Faites défiler vers la droite
fonction scroll_r () {
if (wrap.scrollleft <= 0) {
wrap.scrollleft + = list2.offsetwidth;
}
autre{
wrap.scrollleft--;
}
}
prev.OnClick = function () {
ClearInterval (temporisateur);
Changement (0)
}
Next.OnClick = function () {
ClearInterval (temporisateur);
Changement (1)
}
Changement de fonction (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);
}
}
}
</cript>
</docy>
Code très concis et pratique, veuillez l'embellir en fonction des besoins de votre projet.