直播软件app开发，左右自动滑动的轮播图广告
1、 css部分：
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声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！