养成好习惯是储存健康，放纵不良是透支生命。我们一生之中，要牢记和要忘记的东西一样多。
最近新学习了vuejs,尝试着用vuejs写了一个简单的图片轮播，便做个简单的记录
以下只贴出carousel.vue代码，其他的省略
<template>
<div ref="root">
<div class="sliderPanel">
<div 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>
</div>
</div>
<div @click="clickLeft" @mouseover="clearAuto" @mouseout="slideAuto" class="arrowLeft verticalCenter horizaCenter">
左移
</div>
<div @click="clickRight" @mouseover="clearAuto" @mouseout="slideAuto" class="arrowRight verticalCenter horizaCenter">
右移
</div>
<div class="sliderBar horizaCenter">
<div v-for="(item,index) in imgArray" @mouseover="clearAuto" @mouseout="slideAuto" @click="setIndex(index)" class="circle" :class="{circleSelected:index===selectIndex}">
</div>
</div>
</div>
</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>
整个模块也是分为了template，script，style三个部分，简单的介绍了图片左右切换，以及css滑动效果等，纯当练手。
到此这篇关于如何利用vueJs如何实现图片轮播实例代码就介绍到这了。迷茫的寂寞，虚无的魂魄，一起沉迷这网络是感觉很不错更多相关如何利用vueJs如何实现图片轮播实例代码内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
