先看效果。
说下原理,利用jqury的scrollTop方法控制滚动条到指定的位置,至于连续无缝滚动是将滚动的内容在初始化时复制一份,用于在滚动到末尾时候衔接,避免出现空白。
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>自动滚屏</title> <style> body{ margin: 0; 800px; overflow:hidden; } #boxDiv{ height:200px; overflow:hidden; } </style> </head> <body> <div id="boxDiv" style=""> <div id="contentDiv"> 1<br/> 2<br/> 3<br/> 4<br/> 5<br/> 6<br/> 7<br/> 8<br/> 9<br/> 10<br/> 11<br/> 12<br/> 13<br/> 14<br/> 15<br/> 16<br/> 17<br/> 18<br/> ========================================================<br/> </div> </div> <script src="https://www.w3school.com.cn//jquery/jquery.js"></script> <script> var newTop ; var div=$("#boxDiv"); var boxHeight=div.height(); var contentHeight=$('#contentDiv').height(); $('#contentDiv').append($('#contentDiv').html()); //使用定时器 var timer = setInterval(function(){ var top=div.scrollTop(); //文本是否已经到底部(底部出现在浏览器窗口中) if( top>=contentHeight){ console.log(top); //回到0 div.scrollTop(0); }else{ //每次在原来的基础上移动 newTop = top; div.scrollTop(newTop + 1); } },10); </script> </body> </html>