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