js图片的滑动

小小优化师 anny

已于 2023-08-31 14:23:50 修改

阅读量274

点赞数

分类专栏： JS 文章标签： javascript

于 2023-08-31 10:49:39 首次发布

本文链接：https://blog.csdn.net/q28000/article/details/132598374

版权

JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换，那就需要js里的定时器来控制时间。

<!DOCTYPE html>
  <html lang="en">
   
   <head>
      <meta charset="UTF-8">
      <title>ZuiYangDan</title>
      <style>
          * {
              margin: 0;
             padding: 0;
             list-style: none;
         }
         
         #container {
             width: 100%;
             border: 1px solid #aaa;
             margin: 100px 0px;
         }
         
         #pictures {
             width: 100%;
             height: 520px;
             overflow: hidden;
             position: relative;
         }
         
         #ul1 {
             position: absolute;
             left: 0;
             top: 0;
             overflow: hidden;
         }
         
         #ul1 li {
             float: left;
             width: 700px;
             height: auto;
         }
         
         #ul1 li img {
             width: 700px;              height: auto;
          }
 
     </style>
 
 
<script>
         window.onload = function() {
             var oDiv = document.getElementById("pictures");
            var oUl = document.getElementById("ul1");
             var speed = -3;
           var oLi = document.getElementsByTagName("li");
 
             oUl.innerHTML += oUl.innerHTML;//先把图片增加一组
            oUl.style.width = oLi.length * oLi[0].offsetWidth + "px";
 
             function move() {
                if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
                    oUl.style.left = "0";
               }
                oUl.style.left = oUl.offsetLeft + speed + "px";
             }
             var timer = setInterval(move, 30);
            oDiv.onmouseover = function() {
                 clearInterval(timer);
             };
             oDiv.onmouseout = function() {
                 timer = setInterval(move, 30);
             };
         }
 
     </script>
 
  </head>
 
 <body>
75     <div id="container">
76         <div id="pictures">
77             <ul id="ul1">
78                 <li><img src="https://www.yundapm.com/wp-content/uploads/2023/07/PULPING-PRINCIPLES.jpg" alt=""></li>
79                 <li><img src="https://www.yundapm.com/wp-content/uploads/2023/07/DRUM-PULPING-PROCESS-768x370-1.jpg" alt=""></li>
80                 <li><img src="https://www.yundapm.com/wp-content/uploads/2023/07/SHIPMENT-OF-THE-DRUM-1024x492-2.jpg" alt=""></li>
81                 <li><img src="https://www.yundapm.com/wp-content/uploads/2022/11/1-million-ton-high-grade-paperboard.jpg" alt=""></li>
90             </ul>
91         </div>
92     </div>
93 </body>
 
  </html>