Development of live broadcast software app, and automatic left-right sliding rotation chart advertising

Live Software app Development , Auto slide left and right carousel advertising
1、 css part ：

 
   * {
    
       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;
       /*  Process blank folds  */ 
       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 part ：

   let perWidth = 520; //  The width of a picture 
   let wrapper = document.querySelector('.wrapper');
   let app = document.querySelector('.app');
   let liWrapper = document.querySelectorAll('.liWrapper');
   let dots = document.querySelector('.dot').children; 
   let preTime = 0; //  Last moment , Processing anti shake 
   wrapper.style.width = perWidth * liWrapper.length + 'px'; //  Get and set the total width of the picture container 
   //  Which picture is it now 
   let index = 1;
   //  Timer logo 
   let timer;
   
   // wrapper  initialization 
   function swiperInit() {
    
       wrapper.style.left = '-' + perWidth * index + 'px';  
   }
   
   //  Rotate left 
   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();
       
   }
   
   //  Shift the rotation chart to the right 
   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();
   }
   
   //  Auto play 
   function autoplaySwiper() {
    
       timer = setInterval(() => {
    
           leftMoveSwiper();
       },2000);
   }
   
   //  Event binding 
   function handleBind(){
    
       //  Use event delegation , Bind the click event to the arrow 
       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);
           }
       });
       //  The mouse enters to pause the automatic rotation 
       app.addEventListener('mouseenter',function(){
    
           clearInterval(timer);
       });
   
       //  The mouse leaves and continues to rotate automatically 
       app.addEventListener('mouseleave',function(){
    
           autoplaySwiper();
       })
   
   }
   
   //  Anti shake processing 
   function throttle(fn,delay) {
    
       let now = Date.now();
       if(now - preTime >= delay) {
    
           fn();
           preTime = now;
       }
   }
   
   // dot color setting 
   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');
           }
       }
   }
   
   //  Click the origin to switch the rotation chart 
   function pointDotChangePic(){
    
       for (let i = 0; i < dots.length; i++) {
    
           dots[i].addEventListener('click',function(){
    
               index = i;
               leftMoveSwiper();
           })        
       }
   }
   
   //  Initialize settings 
   function init(){
    
       swiperInit();
       autoplaySwiper();
       handleBind();
       setDotColor();
       pointDotChangePic();
   }
   
   init();

That's all Live Software app Development , Auto slide left and right carousel advertising , More content welcome to follow the article