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>

 

posted @ 2022-03-28 15:07  顺·  阅读(1261)  评论(0)  编辑  收藏  举报