您正在使用IPV4(35.168.110.128)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】多款云产品1折起,买云服务器送免费机器,最长免费续3个月      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2022年 中秋节 21
2022年 国庆节 42
2023年 元 旦 134
2023年 春 节 155
 
本类新增
本类热门文章
您现在的位置:首页 >> 脚本程序 >> 内容
js实现列表自动滚动循环播放
内容摘要: html:[email protected]='rollStop()[email protected]='rollStart(60)'ulid='comment1'li1/lili2/lili3/lili4/lili5/li/ululid='comment2'/ul/divcss:div{height:100px;/*必须*/over......
html:

<!--vue-->

<divid="review_box"@mouseover="rollStop()"@mouseout="rollStart(60)">

<ulid="comment1">

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

</ul>

<ulid="comment2"></ul>

</div>

css:

div{

height:100px;/*必须*/

overflow:hidden;/*必须*/

}

js:

//vuedata

data(){

return{

timer:null,

}

},

mounted(){

this.roll(60);

},

beforeDestroy(){

if(this.timer)clearInterval(this.timer);

},

//vuemethods

roll(t){

varul1=document.getElementById("comment1");

varul2=document.getElementById("comment2");

varulbox=document.getElementById("review_box");

ul2.innerHTML=ul1.innerHTML;

ulbox.scrollTop=0;

this.rollStart(t);

},

rollStart(t){

varul1=document.getElementById("comment1");

varul2=document.getElementById("comment2");

varulbox=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实现酷炫倒计时动画 下一篇:JavaScript实现一键复制内容剪贴
发布日期:2022/7/14
手机扫二维码直达本页
发布时间:14:25:41
点击:112
录入:齐天大圣
相关文章
Baidu

YiJiaCMS 6.3.1.220701(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2022