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 ...
随机推荐
- tuxedo 12c 安装
tuxedo12c 安装命令 静默安装 控制台安装 tuxedo版本介绍 Tuxedo Release Name Tuxedo Release Number Note which contains L ...
- docker中的gitlab数据备份、迁移和升级
前期准备 数据备份 记录gitlab运行命令: docker run -itd --name gitlab \ --hostname gitlab.suniot.cn \ -p 443:443 -p ...
- UIPath踩坑记一UIpath中抓取数据后在tableau中无表头
UIpath抓取数据存在Excel中(Excel 应用程序范围),且已设置表头,但是放到tableau中无表头 更换为"写入范围(工作簿)",同时属性设置必须勾选"添加标 ...
- HTML笔记（二） HTML标签元素
一 常用的头部元素标签 <head>元素包含了所有的头部标签元素. 1.<title> <title>标签定义了HTML文档的标题,在HTML/XHTML文档中是必 ...
- MIUI 12.5稳定版关闭充电提示音的方法
手机开启开发中模式 将手机连接电脑 打开cmd, 输入命令:adb shell settings put global power_sounds_enabled 0,即可关闭充电时的提示音 输入命令: ...
- PointGNN未修改之前实验结果 ---car
10个epoch中1-4:
- 【BUUCTF】强网杯 2019随便注1 write up
输入万能密码1' or 1=1# ,判断存在sql注入, SQL注入的万能密码实际上是利用了网址后台的漏洞,打开下面的网址不用密码和账号也可以登录后台. 万能密码原理: 万能密码能够绕过sql检测,在 ...
- vue 缓存后台获取的token
代码 localStorage.setItem("token",res.data.data);// 用localStorage缓存token值
- OSPF之路由过载overflower 及GR(Graceful Restart优雅重起)
- objectarx调用python注意点
1. 用conda先装好虚拟环境,为了兼容cad2010,最高只能用python3.5(已经不维护了), 如果cad高版本建议python3.6+ 2. 能用pip安装的就用pip安装, 不能用pip ...