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

最新推荐文章于 2025-10-13 16:05:21 发布

原创

最新推荐文章于 2025-10-13 16:05:21 发布 · 8.2k 阅读

97 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #html #css

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

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" :style