Example code sharing of how vueJs implements image carousel
This article mainly introduces the example code of using vueJs to realize picture carousel. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor and take a look.
I recently learned vuejs and tried to write a simple picture carousel using vuejs, so I made a simple record
Only the carousel is posted below. vue code, others are omitted
<template>
<p ref="root">
<p class="sliderPanel">
<p v-for="(item,index) in imgArray" class="verticalCenter picbox">
<transition name="slide-fade">
<img :style="{width:width,top:top}" @mouseover="clearAuto" @mouseout="slideAuto" v-show="index===selectIndex" :src="item.url" style="min-height: 100%">
</transition>
</p>
</p>
<p @click="clickLeft" @mouseover="clearAuto" @mouseout="slideAuto" class="arrowLeft verticalCenter horizaCenter">
左移
</p>
<p @click="clickRight" @mouseover="clearAuto" @mouseout="slideAuto" class="arrowRight verticalCenter horizaCenter">
右移
</p>
<p class="sliderBar horizaCenter">
<p v-for="(item,index) in imgArray" @mouseover="clearAuto" @mouseout="slideAuto" @click="setIndex(index)" class="circle" :class="{circleSelected:index===selectIndex}">
</p>
</p>
</p>
</template>
<script>
const SCREEN_WIDTH=document.body.clientWidth//网页可见区域宽
const SCREEN_HEIGHT=document.body.scrollHeight//网页正文全文高
var selectIndex=0
var timer=null
export default {
name: "ErCarousel",
data() {
return {
selectIndex:0,
width:'100%',
height:SCREEN_HEIGHT+'px',
top:0,
imgArray:[
{
url:'/src/components/carousel/image/1.jpg',
},
{
url:'/src/components/carousel/image/2.jpg',
},
{
url:'/src/components/carousel/image/3.jpg',
}
]
}
},
methods:{
slideAuto:function () {
var that=this;
timer=setInterval(function(){
that.clickRight();
},3000)
//clearInterval(timer);
},
clearAuto:function(){
clearInterval(timer);
},
clickLeft:function(){
if(this.selectIndex==0){
this.selectIndex=this.imgArray.length-1;
}else{
this.selectIndex--;
}
console.log(this.selectIndex);
},
clickRight:function(){
if(this.selectIndex==this.imgArray.length-1){
this.selectIndex=0;
}else{
this.selectIndex++;
}
},
setIndex:function (index) {
this.selectIndex=index;
}
},
mounted:function(){
this.slideAuto();
}
}
</script>
<style>The entire module is also divided into three parts: template, script, and style. It briefly introduces the left and right switching of images, as well as the CSS sliding effect, etc. It is purely for practice.
The above is the detailed content of Example code sharing of how vueJs implements image carousel. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Some tips for developing Android applications using Vue.js and Kotlin language
Jul 31, 2023 pm 02:17 PM
Some tips for developing Android applications using Vue.js and Kotlin language. With the popularity of mobile applications and the continuous growth of user needs, the development of Android applications has attracted more and more attention from developers. When developing Android apps, choosing the right technology stack is crucial. In recent years, Vue.js and Kotlin languages have gradually become popular choices for Android application development. This article will introduce some techniques for developing Android applications using Vue.js and Kotlin language, and give corresponding code examples. 1. Set up the development environment at the beginning
Tutorial on using CSS to implement responsive image automatic carousel effect
Nov 21, 2023 am 08:37 AM
With the popularity of mobile devices, web design needs to take into account factors such as device resolution and screen size of different terminals to achieve a good user experience. When implementing responsive design of a website, it is often necessary to use the image carousel effect to display the content of multiple images in a limited visual window, and at the same time, it can also enhance the visual effect of the website. This article will introduce how to use CSS to achieve a responsive image automatic carousel effect, and provide code examples and analysis. Implementation ideas The implementation of responsive image carousel can be implemented through CSS flex layout. exist
Some tips for developing data visualization applications using Vue.js and Python
Jul 31, 2023 pm 07:53 PM
Some tips for developing data visualization applications using Vue.js and Python Introduction: With the advent of the big data era, data visualization has become an important solution. In the development of data visualization applications, the combination of Vue.js and Python can provide flexibility and powerful functions. This article will share some tips for developing data visualization applications using Vue.js and Python, and attach corresponding code examples. 1. Introduction to Vue.js Vue.js is a lightweight JavaScript
How to use PHP to implement image carousel and slideshow functions
Sep 05, 2023 am 09:57 AM
How to use PHP to implement image carousel and slideshow functions In modern web design, image carousel and slideshow functions have become very popular. These features can add some dynamics and appeal to web pages and improve user experience. This article will introduce how to use PHP to implement image carousel and slideshow functions to help readers master this technology. Creating the Infrastructure in HTML First, create the infrastructure in the HTML file. Let's say our image carousel has a container and several image elements. The HTML code is as follows
How to use PHP to develop a simple image carousel function
Sep 25, 2023 am 11:21 AM
How to use PHP to develop a simple image carousel function. The image carousel function is very common in web design, and can present users with better visual effects and improve user experience. This article will introduce how to use PHP to develop a simple image carousel function and give specific code examples. First, we need to prepare some image resources as carousel images. Place these images in a folder and name it "slider", making sure the folder path is correct. Next, we need to write a PHP script to get these graphs
How to use Vue to implement QQ-like chat bubble effects
Sep 20, 2023 pm 02:27 PM
How to use Vue to implement QQ-like chat bubble effects In today’s social era, the chat function has become one of the core functions of mobile applications and web applications. One of the most common elements in the chat interface is the chat bubble, which can clearly distinguish the sender's and receiver's messages, effectively improving the readability of the message. This article will introduce how to use Vue to implement QQ-like chat bubble effects and provide specific code examples. First, we need to create a Vue component to represent the chat bubble. The component consists of two main parts
How to implement image carousel switching effect and add fade-in and fade-out animation in JavaScript?
Oct 18, 2023 pm 12:12 PM
How to implement image carousel switching effect and add fade-in and fade-out animation with JavaScript? Image carousel is one of the common effects in web design. By switching images to display different content, it gives users a better visual experience. In this article, I will introduce how to use JavaScript to achieve a carousel switching effect of images and add a fade-in and fade-out animation effect. Below is a specific code example. First, we need to create a container containing the carousel in the HTML page and add it
Integration of Vue.js and Lua language, best practices and experience sharing in building front-end engines for game development
Aug 01, 2023 pm 08:14 PM
The integration of Vue.js and Lua language, best practices and experience sharing for building a front-end engine for game development Introduction: With the continuous development of game development, the choice of game front-end engine has become an important decision. Among these choices, the Vue.js framework and Lua language have become the focus of many developers. As a popular front-end framework, Vue.js has a rich ecosystem and convenient development methods, while the Lua language is widely used in game development because of its lightweight and efficient performance. This article will explore how to
