直播軟體app開發，左右自動滑動的輪播圖廣告

直播軟體app開發，左右自動滑動的輪播圖廣告

1、  css部分：

 
   * {
       margin:0;
       padding:0;
       box-sizing:border-box;
       /* overflow: hidden; */
   }
   .app{
       position: absolute;
       top:50%;
       left:50%;
       transform: translate(-50%,-50%);
       height: 280px;
       width: 520px;
       overflow: hidden;
       border-radius: 8px;
       /* display: block; */
   }
   .app:hover .iconfont{
       display:block;
   }
   .wrapper{
       z-index:1;
       display: block;
       position: absolute;
       list-style:none;
       /* 處理空白摺疊 */ 
       font-size: 0; 
   }
   .liWrapper{
       display:inline-block;
   }
   
   .iconfont {
       position:absolute;
       z-index:2;
       font-size:24px;
       height:24px;
       color: blanchedalmond;
       background-color: rgba(0,0,0,0.3);
       cursor:pointer;
       display:none;
   }
   
   .icon-arrow-left{
       top:50%;
       left:-5px;
       border-radius: 0 12px 12px 0;
       transform:translateY(-50%);
   }
   .icon-arrow-right{
       top:50%;
       right:-5px;
       border-radius: 11px 0 0 11px;
       transform:translateY(-50%);
   }
   .dot {
       z-index:2;
       position:absolute;
       bottom:15px;
       left:50%;
       transform: translateX(-50%);
       background-color: rgba(255,255,255,.3);
       border-radius: 6px;
       font-size: 0;
   }
   .dot span {
       display: inline-block;
       width: 8px;
       height: 8px;
       margin: 3px;
       border-radius: 4px;
       background-color: #fff;
   }
   
   .dot-active {
       background-color: #ff5500!important;
   }

2、 js部分：

   let perWidth = 520; // 一張圖片的寬度
   let wrapper = document.querySelector('.wrapper');
   let app = document.querySelector('.app');
   let liWrapper = document.querySelectorAll('.liWrapper');
   let dots = document.querySelector('.dot').children; 
   let preTime = 0; // 上一刻時間，處理防抖
   wrapper.style.width = perWidth * liWrapper.length + 'px'; // 獲取並設定圖片容器的總寬度
   // 當前是第幾張圖片
   let index = 1;
   // 定時器標識
   let timer;
   
   // wrapper 初始化
   function swiperInit() {
       wrapper.style.left = '-' + perWidth * index + 'px';  
   }
   
   // 左移輪播圖
   function leftMoveSwiper() {
       index ++;
       wrapper.style.left = '-' + perWidth * index + 'px';
       wrapper.style.transition = 'left 1s'; 
       if(index >= liWrapper.length - 1) {
           setTimeout(() => {
               index = 1;
               wrapper.style.transition = 'none';
               wrapper.style.left = '-' + perWidth * index + 'px'; 
               setDotColor();
           },1000)
       }
       setDotColor();
       
   }
   
   // 右移輪播圖
   function rightMoveSwiper() {
       index --;
       wrapper.style.left = '-' + perWidth * index + 'px'; 
       wrapper.style.transition = 'left 1s'; 
       if(index <= 0) {
           setTimeout(() => {
               index = 5;
               wrapper.style.transition = 'none';
               wrapper.style.left = '-' + perWidth * index + 'px'; 
           },1000)
       }
       setDotColor();
   }
   
   // 自動播放
   function autoplaySwiper() {
       timer = setInterval(() => {
           leftMoveSwiper();
       },2000);
   }
   
   // 事件繫結
   function handleBind(){
       // 利用事件委託，給箭頭繫結點選事件
       app.addEventListener('click',function(e){
           if(e.target.classList.contains('icon-arrow-left')) {
               throttle(rightMoveSwiper,1000);
           } else if(e.target.classList.contains('icon-arrow-right')) {
               throttle(leftMoveSwiper,1000);
           }
       });
       // 滑鼠進入暫停自動輪播
       app.addEventListener('mouseenter',function(){
           clearInterval(timer);
       });
   
       // 滑鼠離開繼續自動輪播
       app.addEventListener('mouseleave',function(){
           autoplaySwiper();
       })
   
   }
   
   // 防抖處理
   function throttle(fn,delay) {
       let now = Date.now();
       if(now - preTime >= delay) {
           fn();
           preTime = now;
       }
   }
   
   // dot顏色設定
   function setDotColor() {
       for (let i = 0; i < dots.length; i++) {
           if(index === i + 1){
               dots[i].classList.add('dot-active');
           } else {
               dots[i].classList.remove('dot-active')
           }
   
           if(index === dots.length + 1) {
               dots[0].classList.add('dot-active');
           } else if(index === 0) {
               dots[dots.length - 1].classList.add('dot-active');
           }
       }
   }
   
   // 點選原點切換輪播圖
   function pointDotChangePic(){
       for (let i = 0; i < dots.length; i++) {
           dots[i].addEventListener('click',function(){
               index = i;
               leftMoveSwiper();
           })        
       }
   }
   
   // 初始化設定
   function init(){
       swiperInit();
       autoplaySwiper();
       handleBind();
       setDotColor();
       pointDotChangePic();
   }
   
   init();

以上就是 直播軟體app開發，左右自動滑動的輪播圖廣告，更多內容歡迎關注之後的文章