利用vueJs实现图片轮播实例代码
程序员文章站
2022-06-24 17:22:18
最近新学习了vuejs,尝试着用vuejs写了一个简单的图片轮播,便做个简单的记录
以下只贴出carousel.vue代码,其他的省略
最近新学习了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滑动效果等,纯当练手。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。