直播软件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开发，左右自动滑动的轮播图广告，更多内容欢迎关注之后的文章