Vue implementiert Karussell-Animation

In diesem Artikelbeispiel wird der spezifische Code von Vue zur Realisierung der Karussell-Animation als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

Die Anzahl der Bilder kann einen beliebigen Wert haben [1-unbegrenzt]:

<!DOCTYPE html>
<html>
<Kopf>
    <Titel></Titel>
    <meta charset="UTF-8">
    <meta http-equiv="Zugriffskontrolle-Origin-erlauben" content="*">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <Stil>
        html,Text{
            Schriftgröße: 100px;
        }
        html,Text{
            Breite: 100 %;
            Höhe: 100%;
            Überlauf: versteckt;
        }
        .film-box{
            Breite: 100 %;
            Höhe: 100%;
        }
        ul{
            Position: relativ;
            Breite: 100 %;
            Listenstil: keiner;
        }
        ul li {
            Position: absolut;
            oben: 0;
            links: 0;
            Z-Index: 1;
            Breite: 0rem;
            Höhe: 0rem;
            Textausrichtung: zentriert;
        }
        ul li.film-show{
            Übergang: alles 1en;
            Breite: 87rem;
            Höhe: 50rem;
        }
        ul li img {
            /* Breite: 100 %; */
            Höhe: 100%;
        }

        /* Pfeile nach links und rechts */
        .Pfeil {
            Position: absolut;
            Breite: 100 %;
            oben: 50 %;
            /* Deckkraft: 0; */
            Z-Index: 3;
        }
        .vorherige,.nächste {
            Position: absolut;
            Höhe: 5rem;
            Breite: 3rem;
            Randradius: 50 %;
            oben: 50 %;
            Rand oben: -56px;
            Überlauf: versteckt;
            Textdekoration: keine;
        }
        .vorher{
            links: 0;
            Hintergrund: URL("./imgs/arrow-left.png") keine Wiederholung links oben;
            Hintergrundgröße: 100 % 100 %;
        }
        .nächste{
            rechts: 0;
            Hintergrund: URL("./imgs/arrow-right.png") keine Wiederholung rechts oben;
            Hintergrundgröße: 100 % 100 %;
        }

        .filmindex{
            Farbe: #cb2e2e;
            Schriftgröße: 2,4rem;
            Position: absolut;
            unten: 12rem;
            links: 50%;
            transformieren: übersetzenX(-50%);
        }
    </Stil>
</Kopf>
<Text>
    <div Klasse="Film-Box" id='App'>
        <ul id="Folie">
            <li v-for='(item,index) in Filmen' 
                :Schlüssel='Index'
                v-bind:class="item.show ? 'film-show' : ''"
                v-bind:style="{left:filmsHideLeft}" 
                v-bind:data-index = "Index" >
                 <img v-bind:src="item.image" alt="">
            </li>
        </ul>
        <span class="filmindex">{{ filmCurrIndex + 1 + '/' + films.length}}</span>
        <div Klasse="Pfeil" id="Pfeil">
            <a href="javascript:;" id="arrPrev" class="prev" @click='last'></a>
            <a href="javascript:;" id="arrNext" class="next" @click='next'></a>
        </div>
    </div>
</body>
<Skript>
    var vm = neuer Vue({
        el:'#app',
        Daten:{
            Filme:[],
            filmsHideLeft:'0rem', //Steuert, ob das versteckte Bild aus der oberen linken oder der oberen rechten Ecke auftaucht configStart:0,
            filmCurrIndex:2,
            Konfiguration:[
                {
                    "transformieren":"Skala(0,6)",
                    "oben": '5rem',
                    "links": '-13rem',
                    "zIndex": 2,
                    "Hintergrundfarbe": "#98E0AD"
                }, //0
                {
                    "transformieren":"Skala(0,8)",
                    "oben": '3rem',
                    "links": '13rem',
                    "zIndex": 3,
                    "Hintergrundfarbe": "#BAD1F0"
                }, //1
                {
                    "transformieren":"skalieren(1)",
                    "oben": '2rem',
                    "links": '45rem',
                    "zIndex": 4,
                    "Hintergrundfarbe": "#F3DFDE"
                }, //2
                {
                    "transformieren":"Skala(0,8)",
                    "oben": '3rem',
                    "links": '93rem',
                    "zIndex": 3,
                    "Hintergrundfarbe": "#BAD1F0"
                }, //3
                {
                    "transformieren":"Skala(0,6)",
                    "oben": '5rem',
                    "links":'113rem',
                    "zIndex": 2,
                    "Hintergrundfarbe": "#98E0AD"
                }, //4
            ],
          wenigerNum:0,
        },
        Methoden:{
         nächste(){
                wenn (this.lessNum < 5) {
                    this.nextFilmLessFive();
                } anders {
                    dieser.nächsterFilm();
                }
            },
            zuletzt(){
                wenn (this.lessNum < 5) {
                    this.lastFilmLessFive();
                } anders {
                    dieser.letzterFilm();
                }
            },
            nächsterFilm(){
                lass self = dies;
                this.filmsHideLeft = '185rem';
                let currShowFirst = parseInt(document.querySelectorAll('.film-show')[0].dataset.index);
                // Wenn der Letzte in der Mitte ist, wird beim Drücken des Nächsten keine Reaktion mehr erfolgen console.log(currShowFirst,self.films.length)
                wenn (currShowFirst + 3 == self.films.length){
                    zurückkehren;
                }
                // Anzeige und Ausblenden des DOM ändern if (self.configStart == 0) {
                    self.films[aktuelleShowFirst].show = false; 
                    if (currShowFirst + 5 <= this.films.length - 1){// Wenn das vorletzte oder das vorletzte Bild in der Mitte angezeigt wird, müssen Sie nicht festlegen, welches Bild angezeigt werden soll, wenn Sie darauf drücken.
                        self.films[aktuellesShowFirst + 5].show = true;
                    }
                }sonst wenn (self.configStart == 1) {
                    selbst.filme[4].show = true;
                    self.configStart = 0;
                } sonst wenn(self.configStart == 2){
                    selbst.filme[3].show = true;
                    self.configStart = 1;
                }
                
                console.log(selbst.filme)
                selbst.$nextTick(Funktion(){
                    // Ändere DOMs links, oben, Skalierung, zIndex, Hintergrundfarbe
                    dieser.FilmCurrIndex = (dieser.FilmCurrIndex + 1 >= diese.Filmlänge - 1 ? diese.Filmlänge - 1 : dieser.FilmCurrIndex + 1);
                    selbst zuweisen();
                })
            },
            letzterFilm(){
                lass self = dies;
                this.filmsHideLeft = "0rem";
                let currShowFirst = parseInt(document.querySelectorAll('.film-show')[0].dataset.index);
                wenn (currShowFirst !== 0) { 
                    self.films[aktuellesShowFirst -1].show = true;
                    if (currShowFirst + 4 <= this.films.length -1) { // Wenn das vorletzte oder das vorletzte Bild in der Mitte angezeigt wird, muss beim Drücken des vorherigen Bildes nicht „which picture to display“ auf „false“ gesetzt werden.
                        self.films[aktuellesShowFirst + 4].show = false;
                    }
                } anders {
                    wenn (self.configStart == 0) {
                        self.configStart = 1;
                        selbst.filme[4].show = false;
                    } sonst wenn (self.configStart == 1) {
                        self.configStart = 2;
                        selbst.filme[3].show = false;
                    } anders {
                        // Wenn der erste in der Mitte ist, wird beim Drücken des vorherigen keine Reaktion mehr auf die Rückkehr erfolgen;
                    }
                }
                console.log(selbst.filme)
                selbst.$nextTick(Funktion(){
                    this.filmCurrIndex = (this.filmCurrIndex - 1) < 0 ? 0 : (this.filmCurrIndex - 1);
                    selbst zuweisen();
                })
            },
           letzterFilmLessFive(){
                let currShowFirst = parseInt(document.querySelectorAll('.film-show')[0].dataset.index);
                wenn (this.lessNum === 4) {
                    wenn (!this.films[0].show) {
                        diese.filme[0].show = true;
                    } anders {
                        wenn (this.configStart === 2) return;
                        wenn (this.configStart === 0) {
                            diese.configStart = 1;
                        } sonst wenn (this.configStart === 1) {
                            diese.configStart = 2;
                            this.films[3].show = false
                        }  
                    }                           
                } sonst wenn (this.lessNum === 3) {
                    wenn (this.configStart === 1) {
                        diese.configStart = 2;
                    } sonst wenn (this.configStart === 0) {
                        diese.configStart = 1;
                    }
                } sonst wenn (this.lessNum === 2) {
                    wenn (this.configStart === 1) {
                        diese.configStart = 2;
                    } 
                }
                dies.$nextTick(Funktion(){
                    this.filmCurrIndex = (this.filmCurrIndex - 1) < 0 ? 0 : (this.filmCurrIndex - 1);
                    dies.zuweisen();
                })
            },
           nächsterFilmLessFive(){
                let currShowFirst = parseInt(document.querySelectorAll('.film-show')[0].dataset.index);
                wenn (this.lessNum === 4) {
                    wenn (!this.films[0].show) return;
                    wenn (this.configStart === 2) {
                        diese.configStart = 1;
                        diese.filme[3].show = true;
                    } sonst wenn (this.configStart === 1) {
                        diese.configStart = 0;
                    } anders {
                        diese.filme[0].show = false;
                    }           
                } sonst wenn (this.lessNum === 3) {
                    wenn (this.configStart === 1) {
                        diese.configStart = 0;
                    } sonst wenn (this.configStart === 2) {
                        diese.configStart = 1;
                    }
                } sonst wenn (this.lessNum === 2) {
                    wenn (this.configStart === 2) {
                        diese.configStart = 1;
                    } 
                }
                dies.$nextTick(Funktion(){
                    console.log(aktuellerIndexdiesesFilms,LängediesesFilms)
                    dieser.FilmCurrIndex = (dieser.FilmCurrIndex + 1 >= diese.Filmlänge - 1 ? diese.Filmlänge - 1 : dieser.FilmCurrIndex + 1);
                    dies.zuweisen();
                })
            },
            zuweisen() { 
                lass self = dies;
                var list = document.getElementById("slide").getElementsByClassName("film-show"); //Alle Li abrufen
                für (var i = 0; i < Liste.Länge; i++){
                    let json = self.config[i + this.configStart];
                    für (var attr in json) {
                        Liste[i].Stil[attr] = json[attr];
                    }
                }
            }
        },
        montiert(){
            dieser.Film = dieser.Film.concat([
               {Bild:'./imgs/9.jpeg',show:true},
                {Bild:'./imgs/1.jpg',show:true},
                {Bild:'./imgs/2.jpg',show:true},
                {Bild:'./imgs/3.jpg',show:true},
                {Bild:'./imgs/4.jpg',show:true},
                // {Bild:'./imgs/5.jpg',show:false},
                // {Bild:'./imgs/6.jpg',show:false},
                // {Bild:'./imgs/7.jpg',show:false},
                // {Bild:'./imgs/8.jpg',show:false},
            ]);
            dies.$nextTick(Funktion(){
             this.lessNum = diese.Filmlänge;
                wenn (this.lessNum === 3) {
                    diese.configStart = 1;
                    this.filmCurrIndex = 1;
                }
                wenn (this.lessNum === 2) {
                    diese.configStart = 2;
                    this.filmCurrIndex = 0;
                }
                wenn (this.lessNum === 1) {
                    diese.configStart = 2;
                    this.filmCurrIndex = 0;
                }
                dies.zuweisen();
            })
            
        },
        erstellt(){
            let rootWidth = document.documentElement.clientWidth || document.body.clientWidth;
            let rootDom = document.querySelector('html');
            rootDom.style.fontSize = rootWidth / 1920 * 10 + 'px';
        }
    });

  //Funktionale Erweiterung (im obigen Teil wurde das Karussell implementiert):
  // Der folgende Code erreicht das Ziel: Die Maus simuliert die Wischereignisse nach links und rechts auf dem mobilen Endgerät, und die Bilder können durch Wischen nach links und rechts gewechselt werden (function(){
        var touchDot, flagLeft = true, flagRight = true; 
        var bodyDom = document.querySelector('body');
        bodyDom.addEventListener('mousedown',down,false);
        bodyDom.addEventListener('Mausbewegung',Bewegung,false);
        bodyDom.addEventListener('mouseup',oben,false);
        bodyDom.addEventListener('mouseout',up,false);
        Funktion down(Ereignis){
            touchDot = event.clientX; // Den Ursprung der Berührung abrufen}
        Funktion verschieben(Ereignis){
            wenn (touchDot !== undefiniert) {
                var touchMove = event.clientX;
                // Nach links schieben if (touchMove - touchDot <= -40) {
                    wenn (Flagge links) {
                        vm.nextFilm();
                        flagLeft = false; // Sie können nur ein Bild nach links wischen, bevor die Maus angehoben wird. flagRight = true; // Nachdem Sie mit der Maus nach links gewischt haben, um die Bilder zu wechseln, können Sie erneut nach rechts wischen, um zum vorherigen Bild zurückzuwechseln, bevor die Maus angehoben wird. } else {
                        touchDot = touchBewegung;
                    }
                }
                // Nach rechts schieben if (touchMove - touchDot >= 40) {
                    if (FlaggeRechts) {
                        vm.lastFilm();
                        flagRight = false; // Sie können nur ein Bild nach rechts schieben, indem Sie vor dem Anheben der Maus nach rechts wischen. flagLeft = true; // Nachdem Sie zum Wechseln der Bilder nach rechts gewischt haben, können Sie zum vorherigen Bild zurückwechseln, indem Sie vor dem Anheben der Maus erneut nach links wischen. } else {
                        touchDot = touchBewegung;
                    }
                }
            }
        }
        Funktion up(Ereignis){
            // Heben Sie die Maus an, um alles zurückzusetzen und mit dem nächsten Schritt fortzufahren.
            flagRight = wahr;
            flagLeft = wahr;
            touchDot = nicht definiert;
        }
    }())
</Skript>
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren: