js实现轮播图自动切换_javascript技巧_

 //点击按钮，序号变化 showIdx++; if (showIdx == imgArr.length) {                 showIdx = 0;  }   //所有盒子左移动 for (let i = 0; i `;    } else {       deleteBox.innerHTML = ``; }

html, body, ul, li {     margin: 0;     padding: 0; }   a {     text-decoration: none; }   .loopbox {     width: 1226px;     height: 460px;     background: #030;     position: relative;     overflow: hidden; }   .box {     width: 100%;     height: 100%;     float: left;     transition: all .3s;     position: absolute;     left: 0;     /* overflow: hidden; */ } .box.notran{     transition: none; }   .box-item {     /* width: 100%; */     width: 1226px;     height: 100%;     float: left;     background: #f1f1f1;     text-align: center;     font-size: 24px;     line-height: 100px;     /* display: none; */     /* transition: all .3s; */ }   .box-item img {     width: 100%;     height: 100%;     /* 图片适应 */     object-fit: cover; }   .arrow {     width: 60px;     line-height: 30px;     background: #f00;     text-align: center;     color: #f1f1f1;     position: absolute;     top: 50%;     left: 10px;     margin-top: -15px;     border-radius: 15px; }   .arrow:hover {     background: #f60; }   .arrow.arrow-right {     left: auto;     right: 10px; }   .page {     position: absolute;     width: 100%;     text-align: center;     bottom: 10px; }   .page li {     display: inline-block;     width: 80px;     height: 8px;     border-radius: 4px;     background: #000; } /* .page li:first-child {     background: #f90; } */   .page li:hover {     background: #f60; }   .page li.current {     background: #f90; }   .side-qq {     width: 100px;     height: 100px;     background: #f00;     /* position: fixed; */     position: absolute;     right: 10px;     top: 450px; }   .navbar {     width: 100%;     background: #ccc;     text-align: center; }   .navbar.fixed {     position: fixed;     left: 0;     top: 0; }   .nav {     height: 21px; }

                             
     
         
         
         
         
     
     左     右