Vue 实现商品详情多播图(点击图片列表轮播图)

最新推荐文章于 2025-02-17 09:32:26 发布

LONGYog

最新推荐文章于 2025-02-17 09:32:26 发布

阅读量7.9k

点赞数 16

分类专栏： Vue 文章标签： vue javascript html css

本文链接：https://blog.youkuaiyun.com/LONGYog/article/details/124341749

版权

本文介绍了如何使用Vue来创建一个商品详情页面的多播图功能，包括点击左右按钮实现图片滑动，点击小图展示大图，以及图片滚动到末尾自动返回第一张的逻辑。文章提供了HTML、JavaScript和CSS的实现代码。

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

Vue 实现商品详情多播图(点击轮播图)

之前弄商城项目有要到这种效果的商品展示图(商品图片轮播)，找了很久没找到，就自己写了一个。

实现效果：

点击左右按钮图片左右移动
点击小图片图片展示到大图
图片移动到最后直接回滚到第一张

直接上图：

HTML代码：

<template>
    <div>
        <div style="width:800px;height:800px;margin:20px 0 0 700px;">
            <div style="width:400px;height:400px">
                <img :src="mainImgUrl" style="width:100%;height:100%">
            </div>
            <div>
                <i style="font-size: 30px;display: inline-block;position: relative;top: 40px;cursor: pointer;" class="el-icon-arrow-left" @click="imgLeft()"></i>
                <ul class="Img_ul">
                    <li v-for="(item,index) in imgUrlList" :key="index" class="Img_li"