Vue中实现数据列表无缝轮播
类似这种滚动轮播效果
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title>vue.js动态文字滚动公告代码</title>
6 <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
7 <style>
8 div,
9 ul,
10 li,
11 span,
12 img {
13 margin: 0;
14 padding: 0;
15 display: flex;
16 box-sizing: border-box;
17 }
18
19 .marquee {
20 width: 100%;
21 height: 308px;
22 color: #3a3a3a;
23 box-sizing: border-box;
24 }
25
26 .marquee_box {
27 display: block;
28 position: relative;
29 width: 60%;
30 /* 占四分之三的高度 */
31 height: 86%;
32 overflow: hidden;
33 }
34
35 .marquee_list {
36 display: block;
37 width: 100%;
38 position: absolute;
39 top: 0;
40 left: 0;
41 }
42
43 .marquee_top {
44 transition: all 0.5s ease-out;
45 margin-top: -44px;
46 }
47
48 .marquee_list li {
49 height: 44px;
50 line-height: 44px;
51 font-size: 14px;
52 padding-left: 20px;
53 border-bottom: 1px solid rgb(199, 199, 199);
54 }
55
56 .marquee_list li span {
57 padding: 0 2px;
58 }
59
60 .red {
61 color: #ff0101;
62 }
63 </style>
64 </head>
65 <body>
66 <div class="vueBox">
67 <div class="marquee">
68 <div class="marquee_box">
69 <ul :class="['marquee_list', animate ? 'marquee_top' : '']">
70 <li
71 v-for="(item, index) in marqueeList"
72 :key="index"
73 >
74 <span>{{item.name}}</span>
75 <span>在</span>
76 <span class="red"> {{item.city}}</span>
77 <span>杀敌</span>
78 <span class="red"> {{item.amount}}</span>
79 <span>万</span>
80 </li>
81 </ul>
82 </div>
83 </div>
84 </div>
85
86 <script type="text/javascript">
87 const vm = new Vue({
88 el: ".vueBox",
89 data: {
90 animate: false,
91 marqueeList: [
92 {
93 name: "1军",
94 city: "北京",
95 amount: "10",
96 src: "../img/冠军.png"
97 },
98 {
99 name: "2军",
100 city: "上海",
101 amount: "20",
102 src: "../img/亚军.png"
103 },
104 {
105 name: "3军",
106 city: "广州",
107 amount: "30",
108 src: "../img/季军.png"
109 },
110 {
111 name: "4军",
112 city: "重庆",
113 amount: "40",
114 },
115 {
116 name: "5军",
117 city: "天津",
118 amount: "50",
119 },
120 {
121 name: "6军",
122 city: "西安",
123 amount: "60",
124 },
125 {
126 name: "7军",
127 city: "武汉",
128 amount: "70",
129 },
130 {
131 name: "8军",
132 city: "南昌",
133 amount: "80",
134 }
135 ]
136 },
137 created: function() {
138 setInterval(this.showMarquee, 5000);
139 },
140 methods: {
141 showMarquee: function() {
142 this.animate = true;
143 setTimeout(() => {
144 // if (this.marqueeList.length % 2 != 0) {
145 // }
146 this.marqueeList.push(this.marqueeList[0]);
147 this.marqueeList.shift();
148 this.animate = false;
149 }, 500);
150 }
151 }
152 });
153 </script>
154 </body>
155 </html>
Vue中实现数据列表无缝轮播的更多相关文章
- vue 标题上下滚屏 无缝轮播
参考网址:https://www.jianshu.com/p/b6813193ca0d <template> <div class="wrap" :style=& ...
- 原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- Jquery无缝轮播图的制作
轮播是html页面中比较常见的一种展现形式,也是基础,把轮播图做好,是排版中比较关键的 1.首先是轮播的html元素放置:做轮播之前,要有一个初步的认识 2.每个元素的位置怎样摆放,也是很关键的,这里 ...
- js动画 无缝轮播 进度条 文字页面展示 div弹窗遮罩效果
1.无缝轮播 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.a ...
- 分别用css3、JS实现图片简单的无缝轮播功效
本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...
- JQuery制作基础的无缝轮播与左右点击效果
在网页中我们想要的无缝轮播左右循环有好多好多中,这是我第一个轮播效果,也是最基础的,和大家分享一下,对于初学者希望你们能有所借鉴,对于大神我想让你们尽情的虐我给我宝贵的意见. 这个是我要的效果 进入正 ...
- 记一个jquery 无缝轮播的制作方法
接触前端也很久了,今天才发现,要做好一个轮播,其实有很多东西需要考虑进去,否则做出来的轮播效果并不好,下面我就来做一个轮播,是依赖jquery来写的 1.要做轮播,首先需要的是HTML的内容,css的 ...
- js和jquery实现图片无缝轮播的不同写法
多掌握一种方法总是会有好处的,学习编程就要多思考,举一反三 下面写一下实现图片自动播放的代码,由于学习的是javascript,代码量很大,所以又学习了jquery库的操作,非常简便 还有非常有逼格的 ...
- js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...
- jQ实现图片无缝轮播
在铺页面的过程中,总是会遇到轮播图需要处理,一般我是会用swiper来制作,但总会有哪个几个个例需要我自己来写功能,这里制作了一个jq用来实现图片无缝轮播的dome,分享给大家ヽ(￣▽￣)ﾉ. dom ...
随机推荐
- Otto Group Product Classification
遇到的坑: 做多分类,用CrossEntropyLoss时,训练时候的正确标签的范围应该是[0,n-1],而不是[1,n],不然会报 IndexError: Target is out of boun ...
- 1006.Django模型基础01
一.Django的ORM简介 1. ORM概念:对象关系映射(Object Relational Mapping): 2. ORM优势:不用直接编写SQL代码,只需像操作对象一样从数据库操作数据. d ...
- Docker部署【项目管理和问题跟踪工具-Redmine】
创建网络 docker network create redmine-network 启动Mysql数据库 docker run -d --name mysql --network redmine-n ...
- 西电oj135题 拼数字并排序
类别综合 时间限制 1S 内存限制 1000Kb 问题描述 对于输入的字符串(只包含字母和数字),将其中的连续数字拼接成整数,然后将这些整数按从大到小顺序输出.例如字符串"abc123d5e ...
- 【学习】蓝牙的一些基础知识or什么是蓝牙
蓝牙----Bluetooth(短距离无线通信技术) 2022-07-29 14:31:27 蓝牙技术有什么特点(体积小,易集成,低功耗,适用广,抗干扰,成本低,开放性) (1) 蓝牙模块体积很 ...
- Android笔记--添加联系人
添加联系人(将联系人信息添加到手机的通讯录里面) 方式一:使用ContentResolver方法写入对象,每次一个字段 新创建一个需要加入通讯录的对象(我这里写的比较简单,并不是通讯录的标准格式,就是 ...
- PicGo+Typora+Github图床配置步骤（一键上传本地图片）
PicGo+Typora+Github图床配置步骤(一键上传本地图片) 一.配置前的准备 首先你需要有一个Github账号[GitHub]. 然后下载PicGo图片上传工具[PicGo]和Typora ...
- CF916E 解题报告
被这道题搞了一个晚上,还好搞出来了qwq 令人耳目一新的阅读体验 题目简述 翻译已经很简单了. 前置知识 DFS序,LCA,线段树,不需要标签中的树剖! DFS序更新信息及判断祖先 如果你还不知道DF ...
- Python爬虫采集商品评价信息--京东
1.数据采集逻辑 在进行数据采集之前,明确哪些数据为所需,制定数据Schema为爬取工作做出要求,并根据数据Schema制定出有针对性的爬取方案和采集逻辑. 2.数据Schema 3.数据爬取 抓取京 ...
- 基于 ByteHouse 构建实时数仓实践
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 随着数据的应用场景越来越丰富,企业对数据价值反馈到业务中的时效性要求也越来越高,很早就有人提出过一个概念: 数据的 ...