Vue中实现数据列表无缝轮播

实现效果:

链接

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>vue.js动态文字滚动公告代码</title><script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script><style>div,ul,li,span,img {margin: 0;padding: 0;display: flex;box-sizing: border-box;}.marquee {width: 100%;height: 308px;color: #3a3a3a;box-sizing: border-box;}.marquee_box {display: block;position: relative;width: 60%;/* 占四分之三的高度  */height: 86%;overflow: hidden;}.marquee_list {display: block;width: 100%;position: absolute;top: 0;left: 0;}.marquee_top {transition: all 0.5s ease-out;margin-top: -44px;}.marquee_list li {height: 44px;line-height: 30px;font-size: 14px;padding-left: 20px;}.marquee_list li span {padding: 0 2px;}.red {color: #ff0101;}</style></head><bodystyle="width: 100vw; height: 100vh; padding: 10px; box-sizing: border-box;"><div class="vueBox"><div class="marquee"><div class="marquee_box"><ul class="marquee_list" :class="{marquee_top:animate}"><liv-for="(item, index) in marqueeList":key="index":style="{background: item.background, display: 'flex', 'justify-content': 'space-between',  'align-items': 'center'}"><span>{{item.name}}</span><span>在</span><span class="red"> {{item.city}}</span><span>杀敌</span><span class="red"> {{item.amount}}</span><span>万</span><span><img:src="item.src?item.src: ''"style="width: 15px; height: 15px;"alt=""/></span></li></ul></div></div></div><script type="text/javascript">const vm = new Vue({el: ".vueBox",data: {animate: false,marqueeList: [{name: "1军",city: "北京",amount: "10",background: "rgba(0,0,0,.4)",src: "../img/冠军.png"},{name: "2军",city: "上海",amount: "20",background: "rgba(0,0,0,.6)",src: "../img/亚军.png"},{name: "3军",city: "广州",amount: "30",background: "rgba(0,0,0,.4)",src: "../img/季军.png"},{name: "4军",city: "重庆",amount: "40",background: "rgba(0,0,0,.6)"},{name: "5军",city: "天津",amount: "50",background: "rgba(0,0,0,.4)"},{name: "6军",city: "西安",amount: "60",background: "rgba(0,0,0,.6)"},{name: "7军",city: "武汉",amount: "70",background: "rgba(0,0,0,.4)"},{name: "8军",city: "南昌",amount: "80",background: "rgba(0,0,0,.6)"}]},created: function() {setInterval(this.showMarquee, 2000);},methods: {showMarquee: function() {this.animate = true;setTimeout(() => {if (this.marqueeList.length % 2 != 0) {this.marqueeList[0]["background"] =this.marqueeList[0]["background"] === "rgba(0,0,0,.4)"? "rgba(0,0,0,.6)": "rgba(0,0,0,.4)";}this.marqueeList.push(this.marqueeList[0]);this.marqueeList.shift();this.animate = false;}, 500);}}});</script></body>
</html>

Vue中实现数据列表无缝轮播相关推荐

vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
html怎么引轮播图插件,原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
Vue项目中使用swiper插件开发3d轮播图
在开发过程中有3D轮播图的需求,使用vue-awesome-swiper完成先贴个效果图安装npm install swiper@5.4.5 vue-awesome-swiper -S 全局引入并 ...
vue实战-产品详情页（轮播图、放大镜）
vue实战-产品详情页(轮播图.放大镜) 1.添加产品详情页的静态组件因为它是路由组件,将其放入pages文件夹下. 注册路由组件 1)router中添加Detail的路由. {path:'/det ...
纯js封装一个无缝轮播
下面的代码用纯js封装一个轮播组件.功能如下: 可上滑.下滑.左滑.右滑.无缝轮播. 移动端支持手势滑动. 可指定第一个显示的轮播图. 支持放置文字.图片和视频.带导航器. 导航器可自定义样式.若不想 ...
手把手教你用 jQuery 制作无缝轮播
Web 开发已经离不开轮播图,目前轮播的样式五花八门,如:淡入淡出型.上下滑动型.左右滑动型.左右滑动无缝型,对比用户体验的话,无缝轮播方式是最好的,因为在播放多张图片的情况下不会出现间断感,该课程用 ...
用animation实现无缝轮播图
如果需要用js实现无缝轮播,请点传送门用animation实现即表示是纯css实现,首先上效果图: 下面给出示例代码: <!DOCTYPE html> <html lang=&qu ...
例子---JS无缝轮播图
DuangDuang,今天我们来一起说说JS实现无缝轮播.没错,顾名思义,就是我们脑子中浮现的类似淘宝主页面中间部分的那个滚动图.这个轮播图的使用频率还是很大的,所以还是很有必要好好研究一下的. 哈哈 ...
html的动画效果实现无限轮播,利用 CSS3 实现的无缝轮播功能代码
无缝轮播的原理图 1 . html的架构 : JavaScript: /*轮播图*/ function banner() { var banner = document.querySelector(' ...

Vue中实现数据列表无缝轮播

Vue中实现数据列表无缝轮播相关推荐

最新文章

热门文章