Vue Element UI Image Carousel 在滚动的图片上实现文本的缩略显示与全部显示
基于 Vue 使用 element ui 的 carousel 和 image 实现图片的滚动，以及文字在图片上缩略显示和全部显示。
·
前言
基于 Vue 使用 element ui 的 carousel 和 image 实现图片的滚动，以及文字在图片上缩略显示和全部显示。
实现效果
点击查看全部文本
关键代码
<!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>
源码下载
参考文献
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)