模拟相册图片切换

最新推荐文章于 2024-09-15 23:59:26 发布
最新推荐文章于 2024-09-15 23:59:26 发布
阅读量109 收藏
点赞数
分类专栏： vue3随手记 文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_75107188/article/details/133083964
版权

需求：此篇文章的需求背景是有一条H线，H线上有4个H点，每个H点有4张图片，当点击某个H点的某张图片时，打开该弹窗，并进行切换，当前H点切换结束后根据向左或向右切换进行自动拼接前一H点或后一H点内容，自动组成下方图片列表内容

开发：开发内容是一个弹窗，此弹窗是在父级页面选中了某一相册下的某一张图片后弹出

功能：向左切换，向右切换，点击下方图片列表的图片(以下相册=H点，H点=相册)，显示或隐藏下方图片列表

功能详解：

1.多个相册可进行无缝衔接式切换，下方展示相册列表，上方显示图片时下方相册列表进行联动，下方相册列表中对应的图片展示白色边框

2.选中点击下方相册列表中的图片时上方图片随之展示当前选中的图片

3.可进行左右切换，当切换到第一张或最后一张时进行提示

4.每个相册默认4张图片，当当前相册已切换完后，下方相册列表自动拼接,当点击向左切换时下方相册列表为该相册本身与上一相册内容，同理，当点击向右切换时下方相册列表为该相册本身与下一相册内容

5.显示或隐藏下方图片列表

6.使用的都是假数据，如果大家有类似需要，可以根据自己需求进行修改切换时的坐标计算方式，图片路径记得改哦

代码：

html部分：

<template>
    <div class="pointImgDialog" v-show="imgSwitchDialog">
        <div class="pointAll">   
            <div class="pointAll_top">
                <div class="ptTop"  @click="emit('closeImgSwitchDialog')">
                    <span class="iconfont icon-guanbi"/>
                </div>
                <div class="ptBot">
                    <div class="ptBot_left">
                        <div class="icon" @click="leftSwitch">
                            <span class="iconfont icon-xiangzuo1 iconStyle"/>     
                        </div>              
                    </div>
                    <div class="ptBot_cen">
                        <img :src="state.largeImg" class="cenImg">
                        <div class="cenNamePosition">{{state.pName}}</div>
                    </div>
                    <div class="ptBot_right">
                        <div class="icon" @click="rightSwitch">
                            <span class="iconfont icon-xiangyou iconStyle"/>   
                        </div>      
                    </div>
                </div>
            </div> 
            <div class="pointAll_bot" :style="state.imgListShow?'height:18%':'height:3%'">
                <div class="pbTop">
                    <div class="pbTop_icon" @click="state.imgListShow=!state.imgListShow">
                        <span class="iconfont icon-icon_on_the_down" v-show="state.imgListShow"/>  
                        <span class="iconfont icon-icon_on_the_top" v-show="!state.imgListShow"/>      
                    </div>              
                </div>
                <div class="pbBot" v-show="state.imgListShow">
                    <div v-for="(item,index) in state.pointImgList" :key="index" class="pbBotItem" @click="chooseImg(item,index)" :style="state.largeParentId===item.pointId&&state.largeIndex===index||state.largeParentId===item.pointId&&state.largeIndex===index-4?'border-color:#fff':'border-color:transparent'">
                        <img :src="item.imgUrl" class="pbBot_img">
                        <div class="botNamePosition">{{item.name}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

 js部分

<script setup>
import { computed, inject, onBeforeUnmount, ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import * as $cesium from '@/utils/cesium/cesium.js'
const mitter = inject('mitter')
const emit = defineEmits(['closeImgSwitchDialog'])
const props = defineProps({
    checkPointImgInfo:Object,
    imgSwitchDialog:Boolean,
})
const state = reactive({
    //航点信息
    lineInfo:[
        {
            lineId:'10',
            pointId:'101',
            pointName:'H点1',
            pointImg:[{
                pointId:'101',
                id:'1011',
                name:'1点',
                imgUrl:'/src/assets/img/login/test.png',               
            },{
                pointId:'101',
                id:'1012',
                name:'2点',
                imgUrl:'/src/assets/img/login/test.png',               
            },{
                pointId:'101',
                id:'1013',
                name:'特殊点',
                imgUrl:'/src/assets/img/login/test.png',               
            },{
                pointId:'101',
                id:'1014',
                name:'结束点',
                imgUrl:'/src/assets/img/login/test.png',               
            }]
        },
        {
            lineId:'20',
            pointId:'201',
            pointName:'H点2',
            pointImg:[{
                pointId:'201',
                id:'2011',
                name:'1点',
                imgUrl:'/src/assets/img/login/test.png',               
            },{
                pointId:'201',
                id:'2012',
                name:'2点',
                imgUrl:'/src/assets/img/login/loginBg.png',               
            },{
                pointId:'201',
                id:'2013',
                name:'特殊点',
                imgUrl:'/src/assets/img/login/test.png',               
            },{
                pointId:'201',
                id:'2014',
                name:'结束点',
                imgUrl:'/src/assets/img/login/test.png',               
            }]
        },
        {
            lineId:'30',
            pointId:'301',
            pointName:'H点3',
            pointImg:[{
                pointId:'301',
                id:'3011',
                name:'1点',
                imgUrl:'/src/assets/img/login/test.png',               
            },{
                pointId:'301',
                id:'3012',
                name:'2点',
                imgUrl:'/src/assets/img/login/test.png',               
            },{
                pointId:'301',
                id:'3013',
                name:'特殊点',
                imgUrl:'/src/assets/img/login/test.png',               
            },{
                pointId:'301',
                id:'3014',
                name:'结束点',
                imgUrl:'/src/assets/img/login/loginBg.png',               
            }]
        },
        {
            lineId:'40',
            pointId:'401',
            pointName:'H点4',
            pointImg:[{
                pointId:'401',
                id:'4011',
                name:'1点',
                imgUrl:'/src/assets/img/login/test.png',               
            },{
                pointId:'401',
                id:'4012',
                name:'2点',
                imgUrl:'/src/assets/img/login/test.png',               
            },{
                pointId:'401',
                id:'4013',
                name:'特殊点',
                imgUrl:'/src/assets/img/login/test.png',               
            },{
                pointId:'401',
                id:'4014',
                name:'结束点',
                imgUrl:'/src/assets/img/login/test.png',               
            }]
        },
    ],
    //图片目录是否展示
    imgListShow:true,
    //指定H点的图片展示列表
    pointImgList:[],
    largeImg:'',//放大的图片
    pName:'',//H点名称
    largeIndex:'',//放大的图片的图片位置
    largeParentIndex:'',//放大的图片的图片所在父级的位置
    largeParentId:'',//放大的图片的图片所在父级id(H点id)
})
onMounted(()=>{
    //默认的H点id
    state.largeParentId = '201'
    //默认的图片坐标
    state.largeIndex = 1
    //默认的父级坐标
    state.largeParentIndex = 1
    //默认的H点名称
    state.pName=state.lineInfo[state.largeParentIndex].pointName
    //首先默认一进来是这条H线第二个点的第二张图片
    state.largeImg=state.lineInfo[state.largeParentIndex].pointImg[state.largeIndex].imgUrl
    //默认下方目录的图片列表-图片列表右当前H点和当前H点后一个H点的H点图片组成，判断当前H点所在位置是否为H线最后一个航H点，当为最后一个H点时，拼接第一个H点内容
    if(state.largeParentIndex<state.lineInfo.length){
        state.pointImgList=state.lineInfo[state.largeParentIndex].pointImg.concat(state.lineInfo[state.largeParentIndex+1].pointImg)
    }else if(state.largeParentIndex===state.lineInfo.length){
        state.pointImgList=state.lineInfo[state.largeParentIndex].pointImg.concat(state.lineInfo[0].pointImg)
    }
})
//点击下方图片列表中图片
const chooseImg = (data,index) =>{
    //获取当前图片的所在H点id
    state.largeParentId=data.pointId
    //获取当前图片的所在H点id的H点位置
    state.largeParentIndex=state.lineInfo.findIndex(el=>{
        return el.pointId === data.pointId
    })
    //获取当前图片位置-当当前位置小于H点图片数组长度时，直接赋值，当大于时（一开始拼接4个拼接4个，所以长度是8，每个数组中只有0,1,2,3），使用当前数值减4
    if(index<state.lineInfo[state.largeParentIndex].pointImg.length){
        state.largeIndex=index
    }else{
        state.largeIndex=index-4
    }
    // 点击下方列表图片时，切换上方大图图片内容
    state.largeImg=state.lineInfo[state.largeParentIndex].pointImg[state.largeIndex].imgUrl
    //获取当前图片的H点名称
    state.pName=state.lineInfo[state.largeParentIndex].pointName
}
//点击向左切换按钮
const leftSwitch = () =>{
    if(state.largeIndex===0){
        //切换后显示的当前图片为前一H点的最后一张图片
        //当时H线上第一个H点时，提示已经是第一张图片
        if(state.largeParentIndex===0){
            ElMessage({
                message: '已是该H线的第一个H点中的第一张图片！',
                type: 'warning',
            })
        }else{   
            //当是H点中第一个图片，再点击切换前一张时，图片列表为当前所在H点与前一H点图片的拼接
            state.pointImgList=state.lineInfo[state.largeParentIndex-1].pointImg.concat(state.lineInfo[state.largeParentIndex].pointImg)
            //切换后显示的当前图片为前一H点的最后一张图片   
            state.largeParentIndex=state.largeParentIndex-1
            state.largeIndex=3
            state.largeParentId=state.lineInfo[state.largeParentIndex].pointId
            state.largeImg=state.lineInfo[state.largeParentIndex].pointImg[state.largeIndex].imgUrl
        }
    }else if(state.largeIndex>0&&state.largeIndex<4){
        //当是中间图片或最后一张图片时，只切换当前图片的位置向前一个
        state.largeIndex=state.largeIndex-1
        state.largeImg=state.lineInfo[state.largeParentIndex].pointImg[state.largeIndex].imgUrl
    }
    //获取当前图片的H点名称
    state.pName=state.lineInfo[state.largeParentIndex].pointName
}
//点击向右切换按钮
const rightSwitch = () =>{
    if(state.largeIndex===3){
        //当是H点中最后一个图片，再点击切换后一张时，图片列表为当前所在H点与后一H点图片的拼接
        //当时H线上最后一个H点时，提示已经是最后一张图片
        if(state.largeParentIndex<3){
            state.pointImgList=state.lineInfo[state.largeParentIndex].pointImg.concat(state.lineInfo[state.largeParentIndex+1].pointImg)
            //切换后显示的当前图片为后一H点的第一张图片
            state.largeParentIndex=state.largeParentIndex+1
            state.largeIndex=0
            state.largeParentId=state.lineInfo[state.largeParentIndex].pointId
            state.largeImg=state.lineInfo[state.largeParentIndex].pointImg[state.largeIndex].imgUrl
        }else{        
            ElMessage({
                message: '已是该H线的最后一个H点中的最后一张图片！',
                type: 'warning',
            })
        }
    }else if(state.largeIndex<3){
        //当是中间图片或第一张图片时，只切换当前图片的位置向后一个
        state.largeIndex=state.largeIndex+1
        state.largeImg=state.lineInfo[state.largeParentIndex].pointImg[state.largeIndex].imgUrl
    }
    //获取当前图片的H点名称
    state.pName=state.lineInfo[state.largeParentIndex].pointName
}
</script>

css部分

<style lang="scss" scoped>
.pointImgDialog{
    position: absolute;
    left: 50%; 
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 70%;
    background: rgba(0, 0, 0, 1);
    color: #fff;
}
.pointAll {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0.05rem 0.08rem;
    &_top{
       flex: 1;
       height: 65%;
       display: flex;
       flex-direction: column;
       width: 100%;
        .ptTop{
            display: flex;
            justify-content: flex-end;
            background: rgba(0, 0, 0, 0.17);
        }
        .ptBot{
            flex: 1;
            display: flex;
            align-items: center;
            margin: 10px 0;
            &_left{
                width: 15%;
                display: flex;
                justify-content: center;
            }
            &_cen{
                flex: 70%;
                height: 100%;
                border: 1px solid rgba(255, 255, 255, 0.2);
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                .cenImg{
                    max-height: 100%;
                    max-width: 100%;
                }
                .cenNamePosition{
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    height: 20px;
                    background: rgba(0, 0, 0, 0.17);
                    text-align: center;
                    line-height: 20px;
                    color: #fff;
                }
            }
            &_right{
                width: 15%;
                display: flex;
                justify-content: center;
            }
            .icon{
                width: 0.2rem;
                height: 0.2rem;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                background: rgba(255,255,255,0.24);
            }
            .iconStyle{
                font-size: 20px;
            }
        }
    }
    &_bot{
        height: 18%;
        width: 100%;
        display: flex;
        flex-direction: column;
        .pbTop{
            display: flex;
            justify-content: center;
            &_icon{
                height: 0.08rem;
                width: 0.24rem;
                background: rgba(255,255,255,0.24);
                border-radius: 4px 4px 0 0;
                text-align: center;
            }
        }
        .pbBot{
            background: rgba(255,255,255,0.24);
            border-radius: 8px 8px 0 0;
            height: 95%;
            width: 100%;
            overflow: hidden;  
            display: flex;
            justify-content: space-around;
            align-items: center;
            .pbBotItem{
                width: 11%;
                height: 88%;
                border: 1px solid transparent;
                position: relative;
            }
            &_img{
                width: 100%;
                height: 100%;
            }
            .botNamePosition{
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 14px;
                line-height: 14px;
                text-align: center;
                background: rgba(0, 0, 0, 0.32);
                color: #fff;
                font-size: 12px;
            }   
        }
    }
}
:deep(.el-dialog__header){
    display: none;
}
:deep(.el-dialog__body){
    padding: 0.1rem;
    color:#fff;
}
:deep(.el-dialog){
    height: 70%;
    background: #000;
}

-小C_
关注
专栏目录
android imageview 图片切换动画,Android实现图片点击预览效果(zoom动画)
weixin_39539733的博客
05-25 1143
1.创建Views下面的布局包括了你想要zoom的大版本和小版本的view。1.ImageButton是小版本的，能点击的，点击后显示大版本的ImageView。2.ImageView是大版本的，可以显示ImageButton点击后的样式。3.ImageView一开始是不可见的(invisible)，当ImageButton点击后，它会实现zoom动画，就像从ImageButton上扩大显示出来。...
小程序当中实现图片切换效果图
王源源源源的博客
11-04 1304
想要在微信小程序当中实现图片切换效果 autoplay="true"其意思为 是否自动切换 如果不想自动切换 则将true改成false indicator-dots="true"其意思为 图片切换底下的指示点其效果如下图 <swiperautoplay="true"indicator-dots="true"> //其中只可放置swiper-item组件 其余无法识别 <swiper-item> <imagesrc=image...
python爬取qq空间相册图片_如何用 Python 爬取 QQ 空间说说和相册？
weixin_39922004的博客
12-07 1123
安装 seleniumselenium 是一个在浏览器中运行，以模拟用户操作浏览器的方式获取网页源码，使用 pip 安装 selenium 模块pipinstallselenium查看 chrome 浏览器版本并下载 对应的 chrome 浏览器驱动 在 http://npm.taobao.org/mirrors/chromedriver 网址中找到相同版本的 chrome 驱动，并放在 ...
Android实例，实现左右滑动查看相册，图片切换器的应用
一只蒻蒻的博客
02-09 1966
效果图如下： activity_main.xml文件 package com.mingrisoft.showpictrue; import android.support.v7.app.ActionBarActivity; import android.os.Bundle; import android.view.MotionEvent; import android.view.View; i...
jQuery相册图片掀开切换代码
06-24
在“jQuery相册图片掀开切换代码”中，jQuery库被用来处理用户交互和图片切换的逻辑。 1. **图片切换机制**： - 当用户点击当前显示的图片时，jQuery会触发一个事件来检测这个动作。这个事件通常可以是`click`事件...
jQuery相册图片掀开切换代码.zip
07-04
这种“掀开”效果使得图片切换更为生动有趣，常用于网站的相册展示或产品介绍部分。 jQuery是一个轻量级、高性能的JavaScript库，简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。使用jQuery，开发者可以...
3d图片旋转切换（3d相册）
11-03
在IT领域，3D图片旋转切换，也称为3D相册效果，是一种视觉技术，用于在数字媒体上展示图像集合，赋予用户一种立体且动态的浏览体验。这种技术广泛应用于移动应用、网页设计以及多媒体软件中，使得图像展示更加生动...
html5教你做炫酷的碎片式图片切换 (canvas)
09-27
在HTML5中，Canvas元素提供了强大的图形绘制功能，可以用来实现各种炫酷的视觉效果，比如碎片式图片切换。本教程将介绍如何利用Canvas实现这一效果，让图片在切换时呈现出碎片动态重组的样式。 首先，为了创建碎片...
Vue使用query传参Boolean类型，刷新之后转换为String问题
q879936814的博客
09-12 373
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
easyexcel模板导出并且公式自动计算的方法
weixin_47615289的博客
09-11 428
【代码】easyexcel模板导出并且公式自动计算的方法。
构建高效 Python Web API：RESTful 设计与 GraphQL 实践
weixin_52392194的博客
09-11 1351
在现代 Web 开发中，API 是前后端通信的核心枢纽，设计一个高效且易于扩展的 API 是保证系统良好运行的基础。本文详细探讨 RESTful API 的设计准则，如何生成 API 文档，GraphQL 的应用，以及如何在 FastAPI 和 Django REST Framework 中实现分页、过滤、认证等功能。
测试ASP.NET Core的WebApi项目调用WebService
gc_2299的博客
09-15 312
记录在WebApi中调用WebService的基本方式。
《响应式 Web 设计：纯 HTML 和 CSS 的实现技巧》
asd4353012的博客
09-06 1819
响应式 Web 设计是现代网页设计的重要趋势，它可以确保网页在不同设备上都能提供良好的用户体验。在实现响应式 Web 设计时，需要掌握媒体查询、弹性布局、流式布局等技术，同时还需要遵循一些最佳实践，如优先考虑移动设备、保持简洁的布局、优化图像和媒体资源、使用响应式字体和提供良好的用户体验等。响应式 Web 设计可以确保网页在不同设备上都能呈现出最佳的布局和样式，满足用户的需求。在实现响应式 Web 设计后，需要在不同的设备上进行测试，确保网页在各种设备上都能正常显示和交互。可以使用响应式字体技术，如。
计算机毕业设计 基于SpringBoot的课程教学平台的设计与实现 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试
weixin_19164791635
09-12 904
本文介绍了一款基于Java、SpringBoot和Vue.js技术的课程教学平台。该平台服务于管理员、学生和教师，提供教学资源管理、课程信息浏览、作业提交与批改等功能，旨在优化教学流程，提升教育质量，促进教育资源的数字化共享，推动教育信息化发展。
（微服务项目）新闻头条——Day1
weixin_73253843的博客
09-13 1110
（微服务项目）新闻头条——Day1
华为的仓颉和ArkTS这两门语言有什么区别
最新发布
qq_31860647的博客
09-15 455
在运行时实例内存隔离的基础上，ArkCompiler通过共享运行实例中的不可变或者不易变的对象、内建代码块、方法字节码等技术手段，优化了并发运行实例的启动性能和内存开销。了解TypeScript的朋友都应该知道，其实TypeScript就是JavaScript的改进版本，是JS的超级，现在又出了个ArkTS，说是TS的超集。ArkTS的官网介绍说，ArkTS是TypeScript的进一步强化版本，简单来说就是包含了TS的风格，但是做了一些改进。而且，还说了是原生智能化，天生原场景，仔细关注这句话【
一文读懂 JS 中的 Set 结构
沐爸的博客
09-11 998
Set 如何使用？和 Map 有什么区别？有哪些属性和方法？又有哪些使用场景？WeakMap 又是什么？
TypeScript 快速上⼿ （3：装饰器）
每天都要努力学习哦~~
09-15 587
装饰器本质是一种特殊的函数，它可以对：类、属性、方法、参数进行扩展，同时能让代码更简洁。装饰器自2015年在中被提出到现在，已将近10年。截止目前，装饰器依然是实验性特性 ，需要开发者手动调整配置，来开启装饰器支持。装饰器有 5 种：1⃣类装饰器2⃣属性装饰器3⃣方法装饰器4⃣访问器装饰器5⃣参数装饰器备注：虽然中可以直接使用**类装饰器**，但为了确保其他装饰器可用，现阶段使用时，仍建议使用配置来开启装饰器支持，而且不排除在来的版本中，官方会进一步调整装饰器的相关语法！
jQuery实现精美相册效果：详细教程与实例
2. 图片切换：使用jQuery的`.click()`或`.hover()`事件监听用户交互，当点击或鼠标悬停时切换到下一张或上一张图片。 3. 动画效果：除了基础的翻滚效果，还可以加入平滑的过渡动画，让图片切换更加流畅。 4. 导航...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值