Réalisation de l'effet du diagramme de rotation par JS natif

Dieu de l'Opéra américain 2022-05-14 12:36:58 阅读数:623

alisationeffetdudiagrammerotation

PrimitiveJS

Proto - écologieJSEst de suivreECMAScriptStandardjavascript,Sans utiliser le cadre, nous avons examiné nos réponsesJSConnaissance de la grammaire etAPIMaîtrise.Bien que la plupart des programmes frontaux soient actuellement basés sur des cadres,Mais pour les natifsJSC'est toujours important.,Ce code a les effets suivants::

Les effets sont les suivants:Original: ANGLAIS

Affiche le nombre d'images d'une carte en continu au bas de la page en fonction du nombre d'images entrantes et de l'image actuelle,Cliquez sur le cercle approprié pour passer à une autre image;Les boutons gauche et droit peuvent également basculer entre les images,Si c'est actuellement la première ou la dernière image,Cliquez sur le bouton déplacer à gauche ou à droite pour terminer le cycle,Passer de la première image à la dernière,Et l'effet de basculer l'image est toujours.La mise en œuvre spécifique est la suivante::

Exposé des idées

HTMLSection

Puisque c'est original,JSRéalisation,AlorshtmlEtCSSOn peut utiliser moins..TouthtmlIntérieur,Écrire un seuldiv,LeCSSLe format indique qu'il couvre tout l'écran,Introduction de l'écriture supplémentaireindex.jsAprès,InbodyNouveau suivantSliderObjet,Et insérer l'image que nous voulons diffuser.Code complet, c'est tout.,Les codes détaillés sont les suivants::

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>last experiment</title>
<script src="index.js"></script>
</head>
<body>
<div style="
position: fixed;
top:0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: #333;">
</div>
</body>
<script>
new Slider(
document.querySelector('div'),
[
'images/1.png',
'images/3.jpg',
'images/25.png'
]
)
</script>
</html>

JSSection

Mon idée est de charger toutes les images dans un divMoyenne, On appelle ça divC'estinnerct,LedivPrendrefixedMise en page, Laissez l'image s'afficher sur une ligne entière , Chaque image correspond à divDe la même taille.Selondiv La distance de traduction permet de changer l'image rendue par la page , Avec effet de traduction .

L'objectif de la pensée est le contenu de la première ligne de la figure ci - dessous , La boîte rouge indique l'image actuellement affichée , Comme la page actuelle montre le numéro Ⅱ Photos de. Mais si l'image actuelle est la première , En même temps, j'ai appuyé sur le bouton gauche , Selon les caractéristiques du diagramme de rotation , Je devrais passer à la photo 3 , En même temps, la page présente une image qui glisse à droite , C'est - à - dire l'effet du déplacement à gauche , Afficher le numéro comme Ⅲ Photos de.

Pour obtenir cet effet,,Alorsinnerct La disposition de l'image à l'intérieur doit être celle de la deuxième ligne de la figure ci - dessous .En même temps, Lorsque l'image affichée sur la page est la première de la deuxième ligne Le numéro est Ⅲ Heure, Placez la première ligne de la deuxième ligne à ce moment Ⅲ Passage instantané à Quatrième image de la deuxième ligne Ⅲ .Même chose., Lorsque la page présente la cinquième image de la deuxième ligne Ⅰ Heure, Ensuite, déplacez l'image momentanément vers la deuxième ligne Ⅰ L'image peut compléter la réalisation de l'effet de l'image de la roue . Alors ce que nous devons résoudre à ce stade, c'est comment “Mouvement instantané“Fonctionnement.

L'effet de traduction de l'image que nous avons prise CSS Effets de transition dans le style , Alors, nous réglerons le processus de traduction à 1sTerminé à l'intérieur, Pour montrer le processus de traduction , Et la page ne présente pas un changement instantané d'image . Selon cette idée de réalisation de la traduction , Nous pouvons définir lorsque l'image rendue par la page est la première sur la deuxième ligne Ⅲ Et Cinquième ⅠHeure, Définir le processus de traduction à 0sTerminé., Déplacez l'image instantanément vers la quatrième ligne Ⅲ Et Deuxième ligne Ⅰ.À d'autres endroits, L'effet de transition du processus de traduction revient à 1s Terminé à l'intérieur .

Mise en œuvre du Code

Sur la base de ce qui précède ,On peut y aller.JSC'est programmé.. Le Code est divisé en deux parties, l'une est SliderCatégorie, Pour implémenter l'objet graphique de la roue ; L'un est une fonction d'outil pour effectuer des opérations asynchrones de sommeil . Parce que les points de connaissance à l'avant sont plus mélangés , Explications spécifiques , J'ai fait des commentaires dans le Code pour illustrer ,On va commencer >Béton<.

class Slider {
constructor(ct, imgs) { // Ce type de paramètre entrant est un dom Elements and the list
this.currentPage = 0; // Index des images affichées sur la page courante
this.pageCount = imgs.length; // Nombre de cartes à la ronde aka,PhotoslistDe Taille
// let width = window.innerWidth;//Plein écran
let width = ct.offsetWidth; // Ce qui est réalisé ici, c'est que l'image est affichée en plein écran , Ceci peut également être réalisé en utilisant l'énoncé ci - dessus , Mais à cause de cette fois htmlUn seul.div,Prends ça.div La largeur du contour extérieur est également acceptable .
this.width = width;
let height = ct.offsetHeight;
this.innerCt = document.createElement('div');
this.innerCt.style.cssText = `width: ${width * (imgs.length + 2)}px;// Définir où se trouve l'image divLargeur de,Sa largeur est Données de l'image + Dernière image de la tête Et Première image de la queue ,aka,PhotoslistLongueur + 2.
height:100%;padding:0;margin:0;transition:transform 1s ease;left:0`;//Paramètrestransition Effet de transition,Traduction Durée:1s Le mode de transition est ease
// 'width:' + width * imgs.length + 'px;' + 'height:100%;padding:0;' + 'margin:0;' + 'transition:transform 1s ease';//easePlus vite, plus lentement.; La fenêtre pour le nombre d'images
ct.appendChild(this.innerCt);//Oui.innerctMettre dansdomDe l'élément
let circleCt = document.createElement('div');// Voici le cercle au bas de la page
circleCt.style.cssText = `position:fixed;opacity:0.6;bottom:0px;width:100%;padding:10px 0`;// Laissez le cercle en bas
circleCt.setAttribute('align', 'center');//Effets Dans la pièce
ct.appendChild(circleCt);
this.circles = [];
let ct3 = document.createElement('div');//Créer un nouveaudiv, Mettez la dernière image dedans ,Et puis...divMettre dansinnerctMoyenne
ct3.style.cssText = `width:${width}px;height:${height};float:left`;
ct3.setAttribute('align', 'center');//Centre à gauche et à droite
let img3 = new Image();
img3.src = imgs[this.pageCount - 1];
img3.style.cssText = `max-width:${width}px;max-height:${height}px`;
img3.onload = () => {
img3.style.marginTop = (height - img3.height) / 2 + 'px';//Centre vertical
}
ct3.appendChild(img3);
this.innerCt.appendChild(ct3);
imgs.forEach((item, index) => {//Appuyez sur l'image list Dans cet ordre , Et ajoutez un cercle à l'événement de clic
let ct1 = document.createElement('div');
ct1.style.cssText = `width:${width}px;height:${height};float:left`;
// 'width:' + width + 'px;' + 'height:' + height + 'px;' + 'float:left;';
ct1.setAttribute('align', 'center');//Centre à gauche et à droite
let img = new Image();
img.src = item;
img.style.cssText = `max-width:${width}px;max-height:${height}px`;
// 'max-width:' + width + 'px;' + 'max-height:' + height + 'px;';
img.onload = () => {
img.style.marginTop = (height - img.height) / 2 + 'px';//Centre vertical
}
ct1.appendChild(img);
this.innerCt.appendChild(ct1);
let c = document.createElement('div');
c.style.cssText = `width:20px;height:20px;
border-radius:10px;background-coclor:white;
display:inline-block;margin-right:10px;`;
this.circles.push(c);
circleCt.appendChild(c);
c.addEventListener('click', () => {
this.sliderTo(index);// Cliquer sur le petit point a l'effet de glisser
});
});
let ct2 = document.createElement('div');//Créer un nouveaudiv, Mettez la première image dedans ,Et puis...divMettre dansinnerctMoyenne
ct2.style.cssText = `width:${width}px;height:${height};float:left`;
ct2.setAttribute('align', 'center');//Centre à gauche et à droite
let img2 = new Image();
img2.src = imgs[0];
img2.style.cssText = `max-width:${width}px;max-height:${height}px`;
img2.onload = () => {
img2.style.marginTop = (height - img2.height) / 2 + 'px';//Centre vertical
}
ct2.appendChild(img2);
this.innerCt.appendChild(ct2);
let css = `position:absolute;//es6Nouvelles caractéristiques de,Guillemets inversés,Je peux vérifier., Extrêmement facile à utiliser , On dirait que la vitesse de chargement est inférieure à ''.
top:50%;
margin-top: -20px;
height:40px;opacity:0.6;
margin:0px auto;
width:40px;
padding:0 20px
line-height:40px;
background-color:#bbb;
font-size:28px;
cursor:pointer;`;
let btnleft = document.createElement('div')
btnleft.innerHTML = '<';
btnleft.style.cssText = css;
btnleft.style.left = '0px';
let btnright = document.createElement('div')
btnright.innerHTML = '>';
btnright.style.cssText = css + `text-align: right;`;
btnright.style.right = '0px';
ct.appendChild(btnleft);
ct.appendChild(btnright);// Réglez les deux boutons de basculement à gauche et à droite , L'événement de clic ci - dessous est la partie soulignée dans la pensée précédente .
btnleft.addEventListener('click', () => {
if (this.currentPage === 0) {// Lorsque le bouton gauche est cliqué sur la première image .
this.circles[this.currentPage].style.backgroundColor = 'white'; La couleur actuelle du cercle inférieur devient blanche .
this.circles[this.pageCount - 1].style.backgroundColor = 'red'; Le cercle inférieur de la dernière image devient la couleur sélectionnée Rouge
let left = 0 * this.width;En ce momentinnerct La distance de traduction est 0 D'aprèsinnerctInsérer à l'intérieurdiv Ordre, C'est la dernière image .
this.innerCt.style.transform = 'translate(' + left + 'px,0px)';
sleep(1000).then(() => {Sommeil1Seconde terminée.,Doit être utilisé icies6Fonctions fléchées dans, Autant provoquer thisChangement de direction
this.innerCt.style.transitionDuration = "0s";AppelezjsDans transitionDeapi Réglez le temps de transition à 0
this.sliderTo(this.pageCount - 1); Déplacer régulièrement l'image vers la dernière
});
sleep(1100).then(() => { Attendez également que l'opération ci - dessus soit terminée , Réglez à nouveau le temps de transition à 1s, Il suffit d'un peu moins de temps pour terminer ici que ci - dessus
this.innerCt.style.transitionDuration = "1s";
})
return;
}
this.sliderTo(this.currentPage - 1);// Quand il n'y a pas de situation caractéristique , Déplacez à gauche .
});
btnright.addEventListener('click', () => {//Même chose.
console.log('pagecount', this.currentPage);
if (this.currentPage === this.pageCount - 1) {
this.circles[this.currentPage].style.backgroundColor = 'white';
this.circles[0].style.backgroundColor = 'red';
let left = -(this.pageCount + 1) * this.width;
this.innerCt.style.transform = 'translate(' + left + 'px,0px)';
this.currentPage = 0;
sleep(1000).then(() => {
this.innerCt.style.transitionDuration = "0s";
this.sliderTo(0);
});
sleep(1100).then(() => {
this.innerCt.style.transitionDuration = "1s";
})
return;
}
this.sliderTo(this.currentPage + 1);
})
for (let i = 0; i < this.circles.length; ++i) {
this.circles[i].style.backgroundColor = 'white';
}// Initialisation du cercle en bas
this.circles[0].style.backgroundColor = 'white';
this.circles[0].style.backgroundColor = 'red';
let left = -1 * this.width;
this.innerCt.style.transform = 'translate(' + left + 'px,0px)';
this.currentPage = 0;//Définir l'affichagelist Première image dans
}
sliderTo(num) {
this.circles[this.currentPage].style.backgroundColor = 'white';
this.circles[num].style.backgroundColor = 'red';// Commutation du cercle inférieur
let left = -(num + 1) * this.width;//innerct Changement de distance de traduction
this.innerCt.style.transform = 'translate(' + left + 'px,0px)';
this.currentPage = num;// Changements dans les photos actuelles
console.log('pagecurrent::::', this.currentPage);
}
}
function sleep(time) {//es6 Augmentation des opérations asynchrones , L'asynchrone est nécessaire ici pour compléter le sommeil
return new Promise((resolve) => setTimeout(resolve, time));
}

Le code ci - dessus est très détaillé ,Je vais juste répéter.

Voir ci - dessus pour la connexion originale

Copyright:Cet article est[Dieu de l'Opéra américain]Établi,Veuillez apporter le lien original pour réimprimer,remercier。 https://fra.fheadline.com/2022/134/202205141235381601.html