vue revolving lantern automatically jumps

Vue.js is a popular front-end framework today. It provides a wealth of components and plug-ins to help developers develop excellent web applications quickly and efficiently. One of the very common components is the Carousel component, which allows us to display multiple pictures or carousels, and supports manual or automatic switching of display content. This article will introduce how to use Vue.js and Element UI component library to implement the automatic jump function of the revolving lantern.

1. Preparation work

First, we need to introduce the Element UI component library into the project, which can be installed through npm:

npm install element-ui --save

Then in main. Introduce ElementUI through import in js and register the component:

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

2. Create a revolving lantern component

Create a Carousel.vue component file in the project and define it through the template tag Component template:

<template>
  <el-carousel :interval="interval" :autoplay="autoplay">
    <el-carousel-item v-for="(item, index) in items" :key="index">
      <img :src="item.imgUrl" />
      <h3>{{ item.title }}</h3>
    </el-carousel-item>
  </el-carousel>
</template>

In the component, we use the el-carousel and el-carousel-item components in Element UI, which provide rich configuration options and event hooks for customized display and interaction Behavior. Here, we only set the interval attribute and autoplay attribute, which respectively indicate the rotation interval and whether to turn on automatic rotation.

In addition, through the v-for directive, we render each element in the items array into a carousel item. Each carousel item contains an image and a title, corresponding to the imgUrl and title attributes in the data model.

3. Add data and methods

In the component, we need to define the data model and some methods to implement the automatic carousel function. Here, we use the computed property to calculate the index of the current carousel item and update the value of this property every time the carousel item is switched.

<script>
export default {
  data() {
    return {
      items: [
        { imgUrl: '...', title: '...' },
        { imgUrl: '...', title: '...' },
        { imgUrl: '...', title: '...' },
        { imgUrl: '...', title: '...' }
      ],
      currentIndex: 0,
      interval: 3000,
      autoplay: true
    }
  },
  computed: {
    activeIndex() {
      return this.currentIndex % this.items.length
    }
  },
  methods: {
    handleCarouselChange(index) {
      this.currentIndex = index
    }
  }
}
</script>

Among them, the items array is used to store carousel item data, the currentIndex attribute represents the index of the current carousel item, and the interval and autoplay attributes are used to configure the carousel time interval and auto-play switch.

An activeIndex computed property is defined through the computed property. It is not directly bound to the activeIndex property of the carousel component, but is calculated. This is to implement the carousel looping function. When the index value of the current carousel item reaches the length of the array items, it will be reset to 0. In this way, we can achieve the effect of automatically jumping back to the first carousel item after reaching the last carousel item.

At the same time, we also defined the handleCarouselChange method, which will be called when the carousel item is switched, and saves the index value of the current carousel item by updating the currentIndex property.

4. Implementing automatic carousel

Now, we have completed the basic configuration and function implementation of the revolving lantern component. Next, we will write the automatic carousel in the mounted life cycle hook. Play code:

<script>
export default {
  mounted() {
    setInterval(() => {
      this.currentIndex++
    }, this.interval)
  }
  // ...
}
</script>

Here, we use JavaScript’s setInterval method to execute the code regularly to achieve automatic switching of carousel images. We set the time interval of each rotation to the value defined by the interval attribute to achieve unified time control.

So far, we have completed the implementation of the automatic jump function of the revolving lantern. You can adjust the rotation interval by configuring the interval attribute, and you can also turn off or turn on automatic rotation by modifying the autoplay attribute.

Summary

Through the introduction and demonstration of this article, we have learned how to implement the automatic jump function of the revolving lantern through Vue.js and the Element UI component library, and how to implement carousel loop playback. This is very practical for various scenarios such as picture display, news information, product promotion, etc. in web applications. In actual development, we can further optimize and expand the code according to specific business needs to improve application performance and user experience.

The above is the detailed content of vue revolving lantern automatically jumps. For more information, please follow other related articles on the PHP Chinese website!