直播软件app开发，左右自动滑动的轮播图广告

1、 css部分：

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

2、 js部分：

<br>   let perWidth = 520; // 一张图片的宽度<br>   let wrapper = document.querySelector('.wrapper');<br>   let app = document.querySelector('.app');<br>   let liWrapper = document.querySelectorAll('.liWrapper');<br>   let dots = document.querySelector('.dot').children; <br>   let preTime = 0; // 上一刻时间，处理防抖<br>   wrapper.style.width = perWidth * liWrapper.length + 'px'; // 获取并设置图片容器的总宽度<br>   // 当前是第几张图片<br>   let index = 1;<br>   // 定时器标识<br>   let timer;<br>   <br>   // wrapper 初始化<br>   function swiperInit() {<br>       wrapper.style.left = '-' + perWidth * index + 'px';  <br>   }<br>   <br>   // 左移轮播图<br>   function leftMoveSwiper() {<br>       index ++;<br>       wrapper.style.left = '-' + perWidth * index + 'px';<br>       wrapper.style.transition = 'left 1s'; <br>       if(index >= liWrapper.length - 1) {<br>           setTimeout(() => {<br>               index = 1;<br>               wrapper.style.transition = 'none';<br>               wrapper.style.left = '-' + perWidth * index + 'px'; <br>               setDotColor();<br>           },1000)<br>       }<br>       setDotColor();<br>       <br>   }<br>   <br>   // 右移轮播图<br>   function rightMoveSwiper() {<br>       index --;<br>       wrapper.style.left = '-' + perWidth * index + 'px'; <br>       wrapper.style.transition = 'left 1s'; <br>       if(index <= 0) {<br>           setTimeout(() => {<br>               index = 5;<br>               wrapper.style.transition = 'none';<br>               wrapper.style.left = '-' + perWidth * index + 'px'; <br>           },1000)<br>       }<br>       setDotColor();<br>   }<br>   <br>   // 自动播放<br>   function autoplaySwiper() {<br>       timer = setInterval(() => {<br>           leftMoveSwiper();<br>       },2000);<br>   }<br>   <br>   // 事件绑定<br>   function handleBind(){<br>       // 利用事件委托，给箭头绑定点击事件<br>       app.addEventListener('click',function(e){<br>           if(e.target.classList.contains('icon-arrow-left')) {<br>               throttle(rightMoveSwiper,1000);<br>           } else if(e.target.classList.contains('icon-arrow-right')) {<br>               throttle(leftMoveSwiper,1000);<br>           }<br>       });<br>       // 鼠标进入暂停自动轮播<br>       app.addEventListener('mouseenter',function(){<br>           clearInterval(timer);<br>       });<br>   <br>       // 鼠标离开继续自动轮播<br>       app.addEventListener('mouseleave',function(){<br>           autoplaySwiper();<br>       })<br>   <br>   }<br>   <br>   // 防抖处理<br>   function throttle(fn,delay) {<br>       let now = Date.now();<br>       if(now - preTime >= delay) {<br>           fn();<br>           preTime = now;<br>       }<br>   }<br>   <br>   // dot颜色设置<br>   function setDotColor() {<br>       for (let i = 0; i < dots.length; i++) {<br>           if(index === i + 1){<br>               dots[i].classList.add('dot-active');<br>           } else {<br>               dots[i].classList.remove('dot-active')<br>           }<br>   <br>           if(index === dots.length + 1) {<br>               dots[0].classList.add('dot-active');<br>           } else if(index === 0) {<br>               dots[dots.length - 1].classList.add('dot-active');<br>           }<br>       }<br>   }<br>   <br>   // 点击原点切换轮播图<br>   function pointDotChangePic(){<br>       for (let i = 0; i < dots.length; i++) {<br>           dots[i].addEventListener('click',function(){<br>               index = i;<br>               leftMoveSwiper();<br>           })        <br>       }<br>   }<br>   <br>   // 初始化设置<br>   function init(){<br>       swiperInit();<br>       autoplaySwiper();<br>       handleBind();<br>       setDotColor();<br>       pointDotChangePic();<br>   }<br>   <br>   init();

以上就是直播软件app开发，左右自动滑动的轮播图广告，更多内容欢迎关注之后的文章