利用vueJs实现图片轮播

最新推荐文章于 2025-03-08 19:52:57 发布

疯子和傻子的爱情故事

最新推荐文章于 2025-03-08 19:52:57 发布

阅读量1.4w

点赞数 1

分类专栏： vuejs

本文链接：https://blog.youkuaiyun.com/qq_34223398/article/details/72844642

版权

本文记录了作者学习vuejs后，实践制作图片轮播的过程。主要分享了carousel.vue组件的关键实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近新学习了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" @mouseove