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 ...
随机推荐
- JS实现10进制和26进制的转换
转载:https://blog.csdn.net/quentain/article/details/52803891 //将26进制转10进制 var ConvertNum = function (s ...
- hello cnb
Huawei executive Meng Wanzhou freed by Canada arrives home in China 目录 关于git merge冲突时候的想法 Git修改commi ...
- Mapper method 'org.lin.hms.dao.IndentDAO.insertIndent' has an unsupported return type: interface java.util.List
出现这种错误,说明sql语句执行成功,只是返回类型出了问题. 解决办法: mapper文件中的update,delete,insert语句是不需要设置返回类型的,它们都是默认返回一个int ,所以把返 ...
- 贪心算法(Java)
贪心算法 文章目录 贪心算法 0.写在前面 1.贪心算法的基本要素 1.1 贪心选择性质 1.2 最优子结构性质 1.3 贪心算法与动态规划算法的差异 2.贪心算法的特点 3.贪心法的正确性证明 4. ...
- sql几种不同的权限
DDL:Data Definition Language DDL允许用户定义数据,也就是创建表.删除表.修改表结构这些操作.通常,DDL由数据库管理员执行. DML:Data Manipulation ...
- 【故障公告】cc攻击又来了，雪上加霜的三月
非常非常抱歉!今天 21:20-22:10 左右,肆无忌惮的 cc 攻击又来了,蓄意攻击者很厉害,躲过阿里云云盾的黑洞机制,轻松击垮园子的博客站点,又给大家带来了很大的麻烦,请大家谅解! 今年3月是园 ...
- [极客大挑战 2019]BuyFlag 1
好吧,又是一道违背我思想的题目,哦不哦不不对,是本人操作太傻了 首先进入主页面 没有发现什么奇怪的东西,查看源代码,搜索.php 可以看到有一个pay.php,访问查看 给我们了一些提示 FLAG N ...
- Spring Cloud Alibaba实现服务的无损下线功能
目录 1.背景 2.解决方案 2.1 找到通过负载均衡组件获取可用服务信息的地方 2.2 解决思路 3.部分实现代码 3.1 引入jar 3.2 编写服务下线方法 3.3 监听配置变更,清除服务缓存 ...
- DES & 3DES 简介 以及 C# 和 js 实现【加密知多少系列】
〇.简介 1.DES 简介 DES 全称为 Data Encryption Standard,即数据加密标准,是一种使用密钥加密的块算法,1977 年被美国联邦政府的国家标准局确定为联邦资料处理标准( ...
- 三个经典的MySQL问题
大家好,今天给大家上3个经典的MySQL问题,希望能对大家有帮助!但是因为笔者计算机水平有限,可能会存在一些错误,烦请指出.斧正!谢谢! 一.在MySQL中INNER JOIN.LEFT JOIN.R ...