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 ...
随机推荐
- jjencode|JS混淆手工解析编码过程以及自定义混淆变体改装
此前发布过关于aaencode的混淆编码,此篇文章继续说同作者的jjencode混淆编码的具体过程. 介绍 首先是jjencode的作者提供的编码测试页:http://utf-8.jp/public/ ...
- JSP环境搭建及入门 和 虚拟路径和虚拟主机
Jsp:是一个动态网页,而不是静态网页 html,css,js,Jquery:是静态网页 动态网页是随着,时间,地点,用户操作,而改变 静态不需要jsp 动态是需要的 BS 可以通过浏览器直接访问浏览 ...
- lnmp重新安装mysql
安装mysql好长时间,一直没去管,后来一直频繁重启,各种网上找方案去解决,最后问题太异常,一顿操作猛如虎之后把mysql彻底搞垮,无奈只能进行重装. whereis mysql mysql: /us ...
- win 11 VMware workstations b不可恢复的错误（vcpu-2）
首先检查一下电脑有没有开启CPU虚拟化,我的已经开启了,按照百度的方法去控制面板卸载程序里面,找到VMware 右击更改 弹出的安装程序点修复,,结果修复出错了,显示写入文件D:\vm\glib-2. ...
- vue element表格合计问题
vue element计算表格合计问题 问题:当表格的el-table-column标签下的属性prop属性值为'对象.属性'时,将不能自动合计.例如: <el-table border v-l ...
- U-Boot 常用命令介绍
U-Boot简介 U-Boot常用命令 帮助类 - help/?:该命令输出u-boot支持的所有命令及命令的功能 - help/? cmd:可以查看相应cmd的详细介绍及使用方法 查询类 - bdi ...
- 使用RPA有什么好处
通过本章学习,您将了解到: 什么是RPA RPA能为我们做些什么 使用RPA有什么好处 RPA的体系结构是什么 应用RPA是否需要深入了解这项技术 RPA的未来趋势怎么样 什么是RPA? RPA即Ro ...
- MySQL学习（十一）为什么不推荐使用uuid和雪花id
参考博客:https://www.cnblogs.com/wyq178/p/12548864.html 自增的主键的值是顺序的,所以Innodb把每一条记录都存储在一条记录的后面.当达到页面的最大填充 ...
- 性能的极致,Rust的加持,Zed-Dev编辑器快速搭建Python3.10开发环境
快就一个字,甚至比以快著称于世的Sublime 4编辑器都快,这就是Zed.dev编辑器.其底层由 Rust 编写,比基于Electron技术微软开源的编辑器VSCode快一倍有余,性能上无出其右,同 ...
- 快速构造Python爬虫请求，有这个网站就够了！
引言 大家好,我是蜡笔小曦. 我们在通过程序向某个网页发起请求时,实际上是模拟浏览器进行http(超文本传输协议)请求,这就要求我们需要按照固定的格式进行代码构造. 一般请求数据分为三部分:请求行.请 ...