js实现列表自动滚动循环播放

3403771864 发布于2022-09-12 19:55 / 977人阅读

　　列表自动滚动循环播放不要太爽，下面看看具体代码：

　　1.实现效果图

　　鼠标移入，暂停滚动；鼠标移出，继续滚动；

　　2.原理

　　第一：要实现无缝衔接，在原有ul后面还要有一个一样内容的ul；

　　第二：在最外层div为可视区域，设overflow：hidden；

　　第三：2个ul的高度 > 外层可视div高度，才能滚动；

　　3.实现代码

　　html：

　　<!-- vue -->
　　<div id="review_box" @mouseover="rollStop()" @mouseout="rollStart(60)">
　　<ul id="comment1">
　　<li>1</li>
　　<li>2</li>
　　<li>3</li>
　　<li>4</li>
　　<li>5</li>
　　</ul>
　　<ul id="comment2"></ul>
　　</div>

　　css:

　　div {
　　height: 100px; /* 必须 */
　　overflow: hidden;/* 必须 */
　　}

　　js:

　　//vue data
　　data (){
　　return {
　　timer: null,
　　}
　　},
　　mounted() {
　　this.roll(60);
　　},
　　beforeDestroy() {
　　if (this.timer) clearInterval(this.timer);
　　},
　　//vue methods
　　roll(t) {
　　var ul1 = document.getElementById("comment1");
　　var ul2 = document.getElementById("comment2");
　　var ulbox = document.getElementById("review_box");
　　ul2.innerHTML = ul1.innerHTML;
　　ulbox.scrollTop = 0;
　　this.rollStart(t);
　　},
　　rollStart(t) {
　　var ul1 = document.getElementById("comment1");
　　var ul2 = document.getElementById("comment2");
　　var ulbox = document.getElementById("review_box");
　　this.rollStop();
　　this.timer = setInterval(()=>{
　　// 当滚动高度大于列表内容高度时恢复为0
　　if (ulbox.scrollTop >= ul1.scrollHeight) {
　　ulbox.scrollTop = 0;
　　} else {
　　ulbox.scrollTop++;
　　}
　　}, t);
　　},
　　rollStop(){
　　clearInterval(this.timer);
　　},

专线服务云服务器 js循环滚动循环滚动css js js不间断循环滚动 js 语音循环播放

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/127671.html

Vue 实现网易云音乐 WebApp

摘要：基于等开发一款移动端音乐，界面参考了安卓版的网易云音乐布局适配常见移动端。图标使用阿里巴巴图标库，中间的唱片旋转动画使用了实现。搜索功能实现功能搜索歌手歌单歌曲热门搜索数据节流上拉刷新保存搜索记录。基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等开发一款移动端音乐 WebApp，UI ...

Karuru 2019-08-22 17:16 评论0 收藏0
Vue 实现网易云音乐 WebApp

摘要：基于等开发一款移动端音乐，界面参考了安卓版的网易云音乐布局适配常见移动端。图标使用阿里巴巴图标库，中间的唱片旋转动画使用了实现。搜索功能实现功能搜索歌手歌单歌曲热门搜索数据节流上拉刷新保存搜索记录。基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等开发一款移动端音乐 WebApp，UI ...

Terry_Tai 2019-08-05 13:51 评论0 收藏0
Vue 实现的音乐项目 music app 知识点总结分享

摘要：后两个属性可选。属性定义了项目的缩小比例，默认为，即如果空间不足，该项目将缩小。属性定义了在分配多余空间之前，项目占据的主轴空间。它的默认值为，即项目的本来大小。结合的异步组件和的代码分割功能，轻松实现路由组件的懒加载。项目总结这是我第二个用 Vue 实现的项目，下面内容包括了在实现过程中所记录的知识点以及一些小技巧项目演示地址：https://music-vue.n-y.io源...

meteor199 2019-08-26 11:45 评论0 收藏0
HTML5移动端音乐播放器（启蒙篇）

摘要：前些天偷台风的闲暇时写了一个移动端音乐播放器，作为练手项目。有的歌词周杰伦算什么男人格式是时间点时间歌词创建映射首先以将歌词字符串分割成以时间点文字的数组，但由于这样分割之后最后一个元素是空的，所以用删除最后一个元素。这段时间公司一直在做一个PC的教育类单页应用，庞大复杂，涉及非常多H5的知识，音频就是其中的一部分。前些天偷台风的闲暇时写了一个移动端音乐播放器，作为练手项目。在线地...

waterc 2019-08-05 10:18 评论0 收藏0
HTML5移动端音乐播放器（启蒙篇）

摘要：前些天偷台风的闲暇时写了一个移动端音乐播放器，作为练手项目。有的歌词周杰伦算什么男人格式是时间点时间歌词创建映射首先以将歌词字符串分割成以时间点文字的数组，但由于这样分割之后最后一个元素是空的，所以用删除最后一个元素。这段时间公司一直在做一个PC的教育类单页应用，庞大复杂，涉及非常多H5的知识，音频就是其中的一部分。前些天偷台风的闲暇时写了一个移动端音乐播放器，作为练手项目。在线地...

Lin_R 2019-08-20 11:58 评论0 收藏0