Vue erzielt einen nahtlosen Karusselleffekt

In diesem Artikel wird der spezifische Code von Vue zur Erzielung eines nahtlosen Karusselleffekts zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Code

1. Unterkomponentencode

Der Code lautet wie folgt (Beispiel):

<Vorlage>
  <div>
    <div Klasse="Box" @mouseenter="Maus" @mouseleave="mouseleave">
      <ul Klasse="Box1">
        <li>
          <Bild
            :src="n"
            v-for="(n, i) in Bildern"
            :Schlüssel="i"
            alt=""
            :Stil="{ links: (i - Index) * 500 + 'px' }"
            :Klasse="hasAni ? 'Animaton' : ''"
          />
        </li>
      </ul>
      <p class="tt" @click="left">&lt;</p>
      <p class="tt1" @click="rechts">></p>
    </div>
  </div>
</Vorlage>

Der Skriptcode lautet wie folgt (Beispiel):

<Skript>
Standard exportieren {
  Name: "Lunbo",
  Requisiten: ["Bilder"],
  Daten() {
    zurückkehren {
      // Um Bilder in js zu verwenden, müssen Sie require verwenden, um Index zu importieren: 1,
      hasAni: wahr,
      istrue: wahr,
    };
  },
  Methoden: {
    Maus() {
      : ClearInterval(dieser.Timer);
    },
    Maus verlassen () {
      dieser.timer = setzeInterval(() => {
        dies.index++;
        dies.hasAni = wahr;
        wenn (dieser.index == diese.imgs.länge - 1) {
          setzeTimeout(() => {
            dieser.index = 0;
            dies.hasAni = falsch;
          }, 750);
        }
      }, 1500);
    },
    Rechts() {
      wenn (dies.istrue) {
        dies.index++;
        dies.hasAni = wahr;
        dies.istrue = falsch;
        wenn (dieser.index == diese.imgs.länge - 1) {
          setzeTimeout(() => {
            dieser.index = 1;
            dies.hasAni = falsch;
          }, 750);
        }
        setzeTimeout(() => {
          dies.istrue = wahr;
        }, 1000);
      }
    },
    links() {
       wenn (dies.istrue) {
        dies.index--;
        dies.hasAni = wahr;
        dies.istrue = falsch;
        wenn (dieser.index == 0) {
          setzeTimeout(() => {
            dieser.index = diese.imgs.länge - 1;
            dies.hasAni = falsch;
          }, 750);
        }
        setzeTimeout(() => {
          dies.istrue = wahr;
        }, 1000);
      }
    },
  },
  aktiviert() {
    konsole.log(1);
    dieser.timer = setzeInterval(() => {
      dies.index++;
      dies.hasAni = wahr;
      wenn (dieser.index == diese.imgs.länge - 1) {
        setzeTimeout(() => {
          dieser.index = 0;
          dies.hasAni = falsch;
        }, 750);
      }
    }, 1500);
  },
  deaktiviert() {
    : ClearInterval(dieser.Timer);
  },
};
</Skript>

CSS

<Stilbereich>
P {
  Breite: 30px;
  Höhe: 60px;
  Hintergrundfarbe: rgba(46, 139, 86, 0,356);
  Zeilenhöhe: 60px;
  Schriftgröße: 24px;
  Position: absolut;
  oben: 105px;
}
.tt {
  links: 0;
}
.tt1 {
  rechts: 0;
}
.Kasten {
  Breite: 500px;
  Höhe: 300px;
  Rand: 100px automatisch;
  Position: relativ;
  Überlauf: versteckt;
}
.box1 img {
  Position: absolut;
  links: 0px;
  oben: 0;
  Breite: 500px;
  Höhe: 300px;
}
.animaton {
  Übergang: links 0,75 s;
}
</Stil>

2. Übergeordneter Komponentencode

Übergeordnete Komponente

<am Leben erhalten>
      <Lunbo :imgs="Bilder" />
</am Leben erhalten>

Module importieren

importiere Lunbo aus "./components/Lunbo";

Bilddaten

Daten() {
    zurückkehren {
      Bilder:[
        erfordern("./assets/6.jpg"),
        erfordern("./assets/1.jpg"),
        erfordern("./assets/2.jpg"),
        erfordern("./assets/3.jpg"),
        erfordern("./assets/4.jpg"),
        erfordern("./assets/5.jpg"),
        erfordern("./assets/6.jpg"),
        erfordern("./assets/1.jpg"),
      ],
    }

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:

Detaillierte Erläuterung der Idee, mit Vue eine Bildkarussellkomponente zu erstellen
Realisierung des Bildkarusselleffekts basierend auf vue.js
Implementierung eines Karusselldiagramms basierend auf der Karussellkomponente vue.js vue-awesome-swiper
Vue-Übergang zum Erzielen eines Karusselleffekts
Detailliertes Tutorial zum Referenzieren des Swiper-Karussell-Plugins in Vue
Vue.js integriert den Karussell-Beispielcode in mint-ui
Vue.js implementiert einen einfachen Karusselleffekt
Verwendung von vue-concise-slider, einem Plug-In für das Vue-Karussell
Ein Beispiel für die Verwendung von Vue zur Implementierung einer mobilen Bildkarussellkomponente
vue.js+elementUI realisiert die Funktion zum Wechseln des Avatars durch Klicken auf die Pfeile nach links und rechts (ähnlich dem Effekt von Karussellbildern).

<<: So erstellen Sie ein standardisiertes VMware-Image für Kubernetes unter Rancher

>>: Mysql5.7.14 Linux-Version Passwort vergessen perfekte Lösung