js实现走马灯效果-----大屏幕滚动抽奖

最新推荐文章于 2023-11-25 13:10:43 发布

原创最新推荐文章于 2023-11-25 13:10:43 发布 · 3.4k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#走马灯效果 #滚动屏

HTML5-JavaScript-CSS3前端技术专栏收录该内容

13 篇文章

订阅专栏

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript">
           var intervalOne = null;
           window.onload = function() {
               let arr = [
                   "@------四等奖---",
                   "@------二等奖---",
                   "@------三等奖---",
                   "@------再来一次---",
                   "@------一等奖---",
                   "@------三等奖---",
                   "@------四等奖---",
                   "@------四等奖---",
                   "@------再来一次---",
                   "@------四等奖---"
               ];
               show(arr);
               intervalOne = setInterval(function() {
                   scroll();
               }, 10);
           }

           function scroll() {
               let scrollTop = document.getElementById("out_div").scrollTop;
               document.getElementById("out_div").scrollTop = scrollTop + 10;
               if(39 <= scrollTop) {
                   let one_inner_div = document.getElementById("out_div").firstChild;
                   document.getElementById("out_div").removeChild(one_inner_div);
                   document.getElementById("out_div").appendChild(one_inner_div);
               }
           }

           function mouseover1() {
               clearInterval(intervalOne);
           }

           function onmouseleave1() {
               intervalOne = setInterval(function() {
                   scroll();
               }, 10);
           }

</div>
</body>

</html>