您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍了js如何实现列表自动滚动循环播放的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇js如何实现列表自动滚动循环播放文章都会有所收获,下面我们一起来看看吧。
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如何实现列表自动滚动循环播放”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“js如何实现列表自动滚动循环播放”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。