js移动轮播

最新推荐文章于 2022-10-12 21:24:54 发布

蕊蕊酱_Krystal

最新推荐文章于 2022-10-12 21:24:54 发布

阅读量169

点赞数 1

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/Krystal_rui/article/details/85778590

版权

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           * {
               margin: 0;
               padding: 0;
               list-style: none;
           }

           #box {
               width: 200px;
               height: 250px;
               text-align: center;
               border: 1px solid;
               margin: 50px auto;
               position: relative;
               overflow: hidden;
           }

           #sox {
               width: 1200px;
               height: 200px;
               display: flex;
               flex-wrap: wrap;
               flex-direction: column;
               line-height: 200px;
               font-size: 20px;
               font-weight: bold;
               position: relative;
               left: -200px;
           }

           #sox div {
               width: 200px;
               height: 200px;
               position: relative;
           }

           #btn {
               width: 200px;
               height: 50px;
               display: flex;
               justify-content: space-around;
               align-items: center;
           }

           li {
               width: 15px;
               height: 15px;
               background: cornflowerblue;
               border-radius: 50%;
               float: left;
               margin: 5px;
               cursor: pointer;
           }
       </style>
   </head>

   <body>
       <div id="box">
           <div id="sox">
               <div style="background: paleturquoise;">4</div>
               <div style="background: pink;">1</div>
               <div style="background: lightgoldenrodyellow;">2</div>
               <div style="background: plum;">3</div>
               <div style="background: paleturquoise;">4</div>
               <div style="background: pink;">1</div>
           </div>

           <div id="btn">
               <ul>
                   <li></li>
                   <li></li>
                   <li></li>
                   <li></li>
               </ul>
               <div>
                   <button id="lft"> < </button>
                   <button id="rgt"> > </button>
               </div>

</div>
</div>

       <script type="text/javascript">
           var Lft = document.getElementById("lft");
           var Rgt = document.getElementById("rgt");
           var sox = document.getElementById("sox");
           var Arrdiv = sox.getElementsByTagName("div");
           var ArrLi = document.getElementsByTagName("li");
           var box = document.getElementById("box");
           var num = 0;
           var kai = true;
           for (let i = 0; i < ArrLi.length; i++) {
               ArrLi[i].onclick = function() {
                   sox.style.transition = "none";
                   sox.style.left = -Arrdiv[0].offsetWidth * (i + 1) + "px";
                   num = i;
               }
           }
           Rgt.onclick = rgt;
           var move = setInterval(rgt, 3000);
           box.onmouseover = function() {
               clearInterval(move);
           }
           box.onmouseout = function() {
               move = setInterval(rgt, 3000);
           }

           function rgt() {
               if (kai) {
                   kai = false;
                   num++;
                   sox.style.transition = 0.5 + "s";
                   sox.style.left = -Arrdiv[0].offsetWidth * (num + 1) + "px";
                   setTimeout(function() {
                       kai = true
                       if (sox.offsetLeft == "-1000") {
                           num = 0;
                           sox.style.transition = "none";
                           sox.style.left = -Arrdiv[0].offsetWidth + "px";
                       }
                   }, 500)
               }
           }
           Lft.onclick = function() {
               if (kai) {
                   kai = false;
                   num--;
                   sox.style.transition = 0.5 + "s";
                   sox.style.left = -Arrdiv[0].offsetWidth * (num + 1) + "px";
                   setTimeout(function() {
                       kai = true
                       if (sox.offsetLeft == "0") {
                           num = 3;
                           sox.style.transition = "none";
                           sox.style.left = -Arrdiv[0].offsetWidth * (num + 1) + "px";
                       }
                   }, 500)
               }
           }
       </script>
   </body>
</html>

蕊蕊酱_Krystal

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js移动轮播

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; * {
复制链接

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。