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 ...
随机推荐
- SQLyog 13.1.1.0注册码证书秘钥
注册信息: Name:(用户名随意) License Key: Professional: 8e053a86-cdd3-48ed-b5fe-94c51b3d343c Enterprise: a4668 ...
- excel编辑受限的密码保护破解
录制一个宏并且执行: Public Sub 工作表保护密码() Const DBLSPACE As String = vbNewLine & vbNewLine Const AUTHORS A ...
- 3---java中的集合
集合是什么:表示一组元素的对象,有的是有序的,有的是无序的,有的是可重复的,有的是不可重复的. 首先根是:Collection 1:Set 没有重复元素 SortedSet 有序的Set 2:Lis ...
- Jetson查看JetPack版本
Jetson查看JetPack版本 查看L4T版本 cat /etc/nv_tegra_release 我的L4T版本为 32.5.1 在官网查找对应的jetpack版本 This page incl ...
- 树状分级框架UI实例
树状分级框架UI实例:(内容参考https://zhuanlan.zhihu.com/p/108485875) #coding:utf8 #!/usr/bin/env python #@author: ...
- 【LeetCode2180】[Go/C++/C#/Ruby/Swift/Kotlin/Rust/PHP/TS/Racket/Dart/Java/Elixir/Scala/Erlang] 统计各位数字之和为偶数的整数个数
目录 题解地址 代码 golang c++ C# ruby swift kotlin rust php typescript racket dart java elixir scala erlang ...
- 详解uniapp和vue在路由方面的不同和联系
Uniapp 和 Vue 在路由方面有相似之处,因为 Uniapp 是基于 Vue 的.Uniapp 的路由系统是通过 Vue Router 实现的,因此两者有许多相同的概念和 API. 相同点: 都 ...
- MyBatisPlus 逻辑删除演示
一.数据库 数据库中添加逻辑删除字段:
- vue中实用小技巧，长期更新
1.在vue 中使用webpack require.context工程化配置组件,不用一个一个import注册了 main.js中 import Vue from 'vue'//使用lodsh插件im ...
- Let和Const区别，详细版本
let:声明的是变量1.不存在变量提升 // var 的情况 console.log(foo); // 输出undefined var foo = 2; // let 的情况 console.log( ...