无缝滚动

最新推荐文章于 2023-06-27 16:25:30 发布

曙光_moring

最新推荐文章于 2023-06-27 16:25:30 发布

阅读量188

点赞数

分类专栏： javaEE 文章标签： javascript html css

本文链接：https://blog.csdn.net/chenxi_a/article/details/53336600

版权

javaEE 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title>无缝滚动</title>
       <style>
           .outer {
               width: 602px;
               border: 1px solid;
           }

           img {
               float: left;
           }

           .inner {
               /*border: 1px solid red;*/
               height: 152px;
               float: left;
           }

           #outer {
               overflow: hidden;
           }

           #op {
               z-index: 100;
               position: absolute;
               width: 100px;
               height: 100px;
               background-color: #CCC;
           }
       </style>
       <script>
           function $(id) {
               return document.getElementById(id);
           }
           window.onload = function() {
               $("inner2").innerHTML = $("inner1").innerHTML;
               move();
               $("outer").onmouseover = stopscroll;
               $("outer").onmouseout = move;
               initop();
               window.οnscrοll=initop;
           }
           var timeout;
           var step = 5;

           function move() {
               var outer = $("outer");
               outer.scrollLeft += step;
               /*
               * settimeout让某个函数每隔多少毫秒执行一次就相当于是一个循环
               */
               timeout = setTimeout("move()", 500);
               //测试outer.scrollLeft ： outer里边的滚动条距离左边的距离当它滚动到最大的时候马上切换回来
               $("r").innerHTML = outer.scrollLeft;
               //滚动到最大的时候立马切换回来
               if(outer.scrollLeft > 601) {
                   outer.scrollLeft = 0;
               }
           }

           function stopscroll() {
               clearTimeout(timeout);
           }
           /*
           * 初始化op
           */
           function initop() {
               var op = $("op");
               var w = window.innerWidth ||
                   document.documentElement.clientWidth ||
                   document.body.clientWidth;

               var h = window.innerHeight ||
                   document.documentElement.clientHeight ||
                   document.body.clientHeight;

               op.style.left = (w-130) + "px";
               op.style.top = (h-130)+document.body.scrollTop + "px";
           }
       </script>

   </head>

   <body>
       <div id="op">
           操作按钮
       </div>
       <div class="outer" id="outer">
           <div style="height: 150px; width: 1208px;">
               <div class="inner" id="inner1">
                   <img src="img/1.jpg" height="150px" width="300px" />
                   <img src="img/3.jpg" height="150px" width="300px" />
               </div>
               <div class="inner" id="inner2">

               </div>
           </div>
       </div>
       <span id="r"></span>
       <p>lurenjia</p>
       <p>lurenjia</p>
       <p>lurenjia</p>
       <p>lurenjia</p>
       <p>lurenjia</p>
       <p>lurenjia</p>
       <p>lurenjia</p>
       <p>lurenjia</p>
       <p>lurenjia</p>
       <p>lurenjia</p>
       <p>lurenjia</p>
       <p>lurenjia</p>
       <p>lurenjia</p>
       <p>lurenjia</p>
       <p>lurenjia</p>
       <p>lurenjia</p>
       <p>lurenjia</p>
       <p>lurenjia</p>
       <p>lurenjia</p>
       <p>lurenjia</p>
   </body>

</html>