纯VUE实现手写轮播图

最新推荐文章于 2025-05-04 00:20:42 发布

TuanZi Only

最新推荐文章于 2025-05-04 00:20:42 发布

阅读量3k

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_48386494/article/details/121105018

版权

本文分享了使用VUE实现一个简单轮播图的过程。思路与原生JS类似，通过设置父元素样式并利用transition和transform完成轮播效果。文章包括实现思路、效果图及代码展示，适合前端初学者参考。

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

使用VUE也有一段时间了，今天在工作过程中用VUE手写了一个简单的VUE轮播图，在这里分享一下。

（一）实现思路：

和原生JS的实现思路一样只不过是代码展现方式有所不同，同样是给外侧父盒子限定宽度和高度，之后添加overflow: hidden;属性。然后在内部展示轮播内容，利用transition以及transfrom实现轮播。

（二）效果图

（三）代码

<template>
    <div class="Tuan_box">
      <div class="rule_Box">
        <p class="rule_title">拼团规则<i class="iconfont icon-wenhao"></i></p>
        <p class="rule_num">9999人正在拼团</p>
      </div>
      <div class="Tuan_swiper_box" ref="swiper_box" :style="swiperStyle">
        <div
          @mouseleave="swiperplay()"
          @mouseenter="swiperStop()"
          class="swiper_item"
          v-for="(item, index) in 10"
          :key="index"
        >
          <div class="headImag_box">
            <img
              src="https://www.jszg.com/static/platform/pic/img_headpic.png"
              alt=""

最低0.47元/天解锁文章