Vue Element UI Image Carousel 在滚动的图片上实现文本的缩略显示与全部显示

最新推荐文章于 2024-09-08 09:23:09 发布

高建伟-joe

最新推荐文章于 2024-09-08 09:23:09 发布

阅读量3k

点赞数

分类专栏：前端文章标签： vue.js html jquery css3 前端

本文链接：https://blog.csdn.net/Gjw_java/article/details/108239592

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

前言
实现效果
关键代码
源码下载
参考文献

前言

基于 Vue 使用 element ui 的 carousel 和 image 实现图片的滚动，以及文字在图片上缩略显示和全部显示。

实现效果

block

点击查看全部文本

show

关键代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚动图片上添加文字-实现文字展开、收起效果</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
    <div id="app">
        <el-carousel :interval="4000" height="890px" indicator-position="none">
            <el-carousel-item v-for="item in imgLIst" :key="item.id">
                <el-image style="width: 100%; height: 890px" :src="item.src"></el-image>
                <p style="position: absolute; bottom: 0px; left: 0; background-color: white; opacity:0.9;display:none;text-align:left;border-radius:4px;" :class="item.id">
                    {{item.desc}}
                    <el-button style="line-height: 0" type="primary" @click.native="fadeInOrFadeOut(item.id)">收起</el-button>
                </p>
                <p style="position: absolute; bottom: 0px; left: 0; background-color: white; opacity:0.8;border-radius:4px;" :class="item.id">
                    {{item.sdesc}}
                    <el-button type="primary" icon="el-icon-more" @click.native="fadeInOrFadeOut(item.id)"></el-button>
                </p>
            </el-carousel-item>
        </el-carousel>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            imgLIst: [
                {
                    "id": "carousel-item-1",
                    "src": "image/1.jpg",
                    "sdesc": "小说的价值本质是以时间为序列、以某",
                    "desc": "小说的价值本质是以时间为序列、以某一人物或几个人物为主线的，非常详细地、全面地反映社会生活中各种角色的价值关系(政治关系、经济关系和文化关系)的产生、发展与消亡过程。非常细致地、综合地展示各种价值关系的相互作用。"
                },
                {
                    "id": "carousel-item-2",
                    "src": "image/2.jpg",
                    "sdesc": "与其他文学样式相比，小说的容量较大",
                    "desc": "与其他文学样式相比，小说的容量较大，它可以细致地展现人物性格和人物命运，可以表现错综复杂的矛盾冲突，同时还可以描述人物所处的社会生活环境。优势是可以提供整体的、广阔的社会生活。"
                },
                {
                    "id": "carousel-item-3",
                    "src": "image/3.jpg",
                    "sdesc": "小说主要是通过故事情节来展现人物性格、",
                    "desc": "小说主要是通过故事情节来展现人物性格、表现中心的。故事来源于生活，但它通过整理、提炼和安排，就比现实生活中发生的真实实例更加集中，更加完整，更具有代表性。"
                },
                {
                    "id": "carousel-item-4",
                    "src": "image/4.jpg",
                    "sdesc": "小说的环境描写和人物的塑造与中心思想有极",
                    "desc": "小说的环境描写和人物的塑造与中心思想有极其重要的关系。在环境描写中，社会环境是重点，它揭示了种种复杂的社会关系，如人物的身份、地位、成长的历史背景等等。自然环境包括人物活动的地点、时间、季节、气候、景物以及场景等等，用来表现人物的身份、地位。自然环境描写对表达人物的心情、渲染环境气氛都有不少的作用。"
                },
                {
                    "id": "carousel-item-5",
                    "src": "image/5.jpg",
                    "sdesc": "小说是随着时代的发展而发展的：魏晋南北朝，文",
                    "desc": "小说是随着时代的发展而发展的：魏晋南北朝，文人的笔记小说，是中国古代小说的雏形；唐代传奇的出现，尤其是三大爱情传奇，标志着古典小说的正式形成；宋元两代，随着商品经济和市井文化的发展，出现了话本小说，为小说的成熟奠定了坚实的基础；明清小说是中国古代小说发展的高峰，当时是没有可超越者，四大名著皆发于此。"
                },
                {
                    "id": "carousel-item-6",
                    "src": "image/6.jpg",
                    "sdesc": "纯文学中的小说体裁讲究纯粹性。“谎言去尽之谓纯。”(",
                    "desc": "纯文学中的小说体裁讲究纯粹性。“谎言去尽之谓纯。”(出自墨人钢《就是》创刊题词)便是所谓的“纯”。也就是说，小说在构思及写作的过程中能去尽政治谎言、道德谎言、商业谎言、维护阶级权贵谎言、愚民谎言等谎言，使呈现出来的小说成品具备纯粹的艺术性。小说的纯粹性是阅读者最重要的审美期待之一。随着时代的发展，不光是小说，整个文学的纯粹性逾来逾成为整个世界对文学审美的一个重要核心。"
                },
                {
                    "id": "carousel-item-7",
                    "src": "image/7.jpg",
                    "sdesc": "东汉桓谭在其所著的《新论》中，对小说如是说：“若其",
                    "desc": "东汉桓谭在其所著的《新论》中，对小说如是说：“若其小说家，合丛残小语，近取譬论，以作短书，治身理家，有可观之辞。”认为小说仍然是“治身理家”的短书，而不是为政化民的“大道”。"
                }
            ]
        },
        methods: {
            // 展开描述
            fadeInOrFadeOut(className) {
                $("." + className).fadeToggle();
            }
        }
    })
</script>
</html>