vue轮播图

最新推荐文章于 2024-01-31 17:37:45 发布

凡人修道

最新推荐文章于 2024-01-31 17:37:45 发布

阅读量359

点赞数 2

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45712886/article/details/104951092

版权

本文介绍了如何在Vue.js中实现轮播图功能，包括主要的body、JavaScript和CSS代码段，虽然未包含左右箭头图标的引入方法，但展示了轮播图的基本实现过程。

摘要由CSDN通过智能技术生成

vue 实现轮播

body部分

<body>
    <div id="app" class="min">
        <div class="banner" @mouseenter="stop" @mouseleave="start">
            <div class="btn-left" @click="move(1)"></div>
            <ul class="lunbotu" :class="ulClass" style="width: 5950px;" :style="ulStyle">
                <li v-for="(img,i) of imgs" :key="i">
                    <router-link to="">
                        <img :src="img.src" alt />
                    </router-link>
                </li>
                <li>
                    <router-link to="">
                        <img :src="imgs[0].src" alt />
                    </router-link>
                </li>
            </ul>
            <ul class="ul-idxs">
                <li v-for="(img,idx) of imgs" :key="idx" :class="idx==i?'active':''" @click="moveTo(idx)"></li>
            </ul>
            <div class="btn-right" @click="move(-1)"></div>
        </div>
    </div>
</body>