vue实现侧边图片上下点击轮播

最新推荐文章于 2024-05-23 10:34:55 发布

原创

最新推荐文章于 2024-05-23 10:34:55 发布 · 1.2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #html #css

本文介绍如何使用Vue实现侧边图片的上下点击轮播功能。通过展示HTML、JavaScript和CSS代码，作者详细说明了实现过程，适合Vue初学者参考和学习。

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

vue实现侧边图片上下点击轮播

开门见山，直接上图

HTML代码：

<template>
    <div>
        <div style="width:400px;height:400px;margin:100px 0 0 700px;">
            <ul class="sideImg_ul">
                <li v-for="(item,index) in SideImgUrlList" :key="index" class="sideImg_li" :style="sideimgStyle">
                    <img :src="item" style="width:100%;height:100%">
                </li>
            </ul>
            <p style="font-size:30px">
                <i class="el-icon-arrow-up" @click="sideImgTop()"></i>
                <i class="el-icon-arrow-down" @click="sideImgBottom()"></i>
            </p>
        </div>
    </div>
</template>

JavaScript代码：