vue.js에서 캐러셀 이미지를 작성하는 방법

vue.js에서 캐러셀 이미지를 작성하는 방법: 먼저 전체 프레임워크를 작성한 다음 캐러셀 이미지 배열을 정의하고 로컬 이미지를 업로드합니다. 마지막으로 맞춤 변수 nowindex를 변경하여 캐러셀 이미지의 상태를 변경합니다.

이 튜토리얼의 운영 환경: windows10 시스템, vue2.9, 이 기사는 모든 브랜드의 컴퓨터에 적용 가능합니다.

【추천 관련 글: vue.js】

vue.js 캐러셀 이미지 작성 방법:

캐러셀에 대한 원래 Js를 대체하려면 v-if或者v-show를 사용하세요. 이미지 슬라이딩 및 전환 효과는 전환을 통해 쉽게 얻을 수 있습니다. 슬라이딩 프로세스 중에 두 개의 이미지가 표시될 수 있으므로 두 개의 전환이 필요합니다.

(1) 먼저 전체 프레임워크를 작성합니다

<template>
<div class="slide-show">
<div class="slide-img">
<transition name="slide-trans" >
<img v-if=&#39;ifshow&#39; :src=&#39;imgArray[nowindex]&#39;>
</transition>
<transition name="slide-trans-old">
  <img v-if="!ifshow" :src="imgArray[nowindex]">
 </transition>
<ul class="slide-pages">
<li v-for="(item,index) in imgArray">
<span :class="{on :index===nowindex}" @click="goto(index)"></span>
</li>
</ul>
</div>
</div>
</template>

imgArray 사진 배열에 따라 작은 점의 수를 렌더링하고, 스팬을 바인딩하여 작은 점을 밝게 하고, 사용자 정의 변수 ifshow를 통해 사진을 표시하고 숨깁니다. 표시하기 위해 이제 index는 캐러셀에 해당하는 사진을 제어합니다.

(2) 캐러셀 이미지 배열이 로컬 이미지이고 정적 파일 아래에 배치되지 않은 경우 require로 경로에 동그라미를 치십시오. 그렇지 않으면 경로에서 오류가 보고됩니다. 백엔드 서버에서 얻은 경우에는 필요하지 않습니다.

data(){
return{
imgArray: [
require('../../img/item_01.png'),
require('../../img/item_02.png'),
require('../../img/item_03.png'),
require('../../img/item_04.png')
]
}
}

(3) 주로 맞춤 변수 nowindex를 변경하여 캐러셀 이미지의 상태를 변경합니다. 슬라이딩 프로세스 중에 두 개의 이미지가 표시될 수 있으므로 goto 기능에 짧은 타이머가 설정되어 하나의 이미지가 허용됩니다. 표시되고 다른 하나는 숨겨지며 각각 다른 전환 효과를 갖습니다.

<script type="text/javascript">
export default {
props:{
imgArray:{
type:Array,
default:[]
}
},
data() {
return {
ifshow:true,
nowindex:0,
}
},
created(){
this.timerun()
},
computed:{
nextindex(){
if(this.nowindex === this.imgArray.length -1){
return 0
}else{
return this.nowindex + 1
}
}
},
methods: {
goto(index){
let that = this;
this.ifshow = false;
setTimeout(function(){
that.ifshow = true;
that.nowindex = index;
},100)
 
},
timerun(){
 let that = this;
 setInterval(function(){
 that.goto(that.nextindex)
 },2000)
 }
}
}
</script>

여기서 간단한 캐러셀 이미지가 끝납니다.

관련 무료 학습 권장 사항: JavaScript(동영상)

위 내용은 vue.js에서 캐러셀 이미지를 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!