欢迎光临散文网 会员登陆 & 注册

无缝滚动图片轮播JS部分~实现轮播运动效果~

2023-02-22 23:50 作者:嘿大喵喵  | 我要投稿
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="UTF-8">  
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  8.     <title>Document</title>  
  9.     <style>  
  10.         * {  
  11.             margin: 0;  
  12.             padding: 0;  
  13.         }  
  14.   
  15.         :root {  
  16.             --iwidth: 960px;  
  17.             --iheight: 540px;  
  18.         }  
  19.   
  20.         body {  
  21.             background-color: #7f8c8d;  
  22.             width: 100vw;  
  23.             height: 100vh;  
  24.             display: flex;  
  25.             justify-content: center;  
  26.             align-items: center;  
  27.         }  
  28.   
  29.         #img {  
  30.             width: var(--iwidth);  
  31.             height: var(--iheight);  
  32.             box-shadow: 0 0 15px rgba(0, 0, 0, .7);  
  33.             border-radius: 10px;  
  34.             overflow: hidden;  
  35.             position: relative;  
  36.         }  
  37.   
  38.         #main div {  
  39.             width: var(--iwidth);  
  40.             height: var(--iheight);  
  41.             border-radius: 10px;  
  42.             flex-shrink: 0;  
  43.             background-size: cover;  
  44.         }  
  45.   
  46.         #main {  
  47.             position: absolute;  
  48.             left: 0;  
  49.             display: flex;  
  50.             gap: 10px;  
  51.         }  
  52.   
  53.         #img1 {  
  54.             background-image: url(./img/lunbo1.png);  
  55.         }  
  56.   
  57.         #img2 {  
  58.             background-image: url(./img/lunbo2.png);  
  59.         }  
  60.   
  61.         #img3 {  
  62.             background-image: url(./img/lunbo3.png);  
  63.         }  
  64.   
  65.         #img4 {  
  66.             background-image: url(./img/lunbo4.png);  
  67.         }  
  68.   
  69.         #mask {  
  70.             width: var(--iwidth);  
  71.             height: var(--iheight);  
  72.             position: absolute;  
  73.             display: flex;  
  74.             justify-content: space-between;  
  75.         }  
  76.   
  77.         #mask div {  
  78.             width: 25%;  
  79.             height: 100%;  
  80.             z-index: 999;  
  81.             user-select: none;  
  82.             position: relative;  
  83.         }  
  84.   
  85.         .btn {  
  86.             display: block;  
  87.             width: 60px;  
  88.             height: 60px;  
  89.             border-radius: 10px;  
  90.             background-color: black;  
  91.             opacity: .5;  
  92.             box-shadow: 0 0 10px rgba(255, 255, 255.8);  
  93.             color: rgba(255, 255, 255, .8);  
  94.             font-size: 40px;  
  95.             text-align: center;  
  96.             position: absolute;  
  97.             top: 50%;  
  98.             /*水平方向移动：（遮罩宽度-按钮宽度）/2  */  
  99.             transform: translate(90px, -50%);  
  100.             display: none;  
  101.         }  
  102.   
  103.         #l_mask:hover .btn,  
  104.         #r_mask:hover .btn {  
  105.             display: block;  
  106.         }  
  107.   
  108.         .btn:hover {  
  109.             cursor: pointer;  
  110.             background: rgb(56, 17, 17, .7);  
  111.         }  
  112.     </style>  
  113. </head>  
  114.   
  115. <body>  
  116.     <div id="img">  
  117.         <div id="main">  
  118.             <div id="img1"></div>  
  119.             <div id="img2"></div>  
  120.             <div id="img3"></div>  
  121.             <div id="img4"></div>  
  122.         </div>  
  123.     </div>  
  124.     <div id="mask">  
  125.         <div id="l_mask">  
  126.             <span class="btn"><</span>  
  127.         </div>  
  128.         <div id="r_mask">  
  129.             <span class="btn">></span>  
  130.         </div>  
  131.     </div>  
  132. </body>  
  133. <script>  
  134.     let oMain = document.querySelector('#main');  
  135.     let oMask = document.querySelector('#mask');  
  136.     let oImg = document.querySelector('#main div')  
  137.     let aButton = document.querySelectorAll('span')  
  138.     let speed = -5  
  139.     oMain.innerHTML += oMain.innerHTML;  
  140.     let move = () => {  
  141.         if (oMain.offsetLeft < -oMain.offsetWidth / 2) {  
  142.             console.log("111");  
  143.             oMain.style.left = '0px';  
  144.         }  
  145.         if (oMain.offsetLeft > 0) {  
  146.             console.log("222");  
  147.             oMain.style.left = -oMain.offsetWidth / 2 + 'px'  
  148.         }  
  149.         oMainoMain.style.left = oMain.offsetLeft + speed + "px";  
  150.     }  
  151.     let timer = setInterval(move, 30)  
  152.     oMask.addEventListener("mouseover", () => {  
  153.         clearInterval(timer);  
  154.     })  
  155.     oMask.addEventListener("mouseout", () => {  
  156.         timer = setInterval(move, 30)  
  157.     })  
  158.     console.log(aButton[0]);  
  159.     aButton[0].onclick = () => {  
  160.         speed = -5;  
  161.     }  
  162.     aButton[0].onclick = () => {  
  163.         speed = 5;  
  164.     }  
  165. </script>  
  166.   
  167. </html>  


标签：

无缝滚动图片轮播JS部分~实现轮播运动效果~的评论 (共 条)

分享到微博请遵守国家法律