vue.js에서 캐러셀 이미지를 만들 수 있나요?

vue.js는 캐러셀 이미지를 만들 수 있습니다. 구현 방법은 다음과 같습니다. 먼저 전체 프레임워크를 작성한 다음 imgArray 사진 배열에 따라 작은 점 수를 렌더링한 다음 작은 점이 켜진 상태에 바인딩합니다. ; 마지막으로 사용자 정의 변수 ifshow를 사용하여 이미지 표시 및 숨기기를 표시하고 nowindex를 설정하여 캐러셀을 제어합니다.

이 튜토리얼의 운영 환경: windows7 시스템, vue 버전 2.0 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

관련 추천 : "vue.js Tutorial"

최근에 vuejs를 배우고 vuejs를 이용해서 간단한 그림 캐러셀을 작성해보려고 해서 간단하게 기록을 해봤습니다

(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>

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

위 내용은 vue.js에서 캐러셀 이미지를 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!