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

文章目录

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

前言

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

实现效果

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

点击查看全部文本

关键代码


<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>

源码下载

点击下载源码

参考文献

css 淡入淡出

你可能感兴趣的:(前端,vue.js,html,jquery,css3,前端)