JS原生项目——五、实现轮播图样式

五、实现轮播图样式

1.轮播图样式

同行显示的inline-block元素之间经常会出现一定的空隙，这就是“换行符/空格间隙问题”。
解决方法：

方法一：解决元素之间的空白符将设置有display：inline-block的写到一行
方法二：为父元素中设置font-size: 0，在子元素上重置正确的font-size （本项目中使用的方法）
方法三：为inline-block元素添加样式float:left （课程老师使用方法）

/* 轮播图开始 */
.banner{
    width: 100%;
    height: 470px;
    padding-top: 10px;
    margin-bottom: 30px;
    background-color: antiquewhite;
}
.banner-box{
    height: 470px;
    background-color: pink;
}
.banner-slide{
    width: 790px;
    height: 470px;
    /*  设置居中*/
    margin: 0 auto;
    background-color: aqua;
}
.slide{
    position: relative;
    width: 590px;
    height: 470px;
    /* background-color: violet; */
}
.prev,.next{
    position: absolute;
    top: 50%;
    margin-top: -20px;
    width: 25px;
    height: 35px;
    line-height: 35px;/*行高=高度，是为了居中显示*/
    background-color: rgba(0,0,0,.15);
    font-size: 20px;
    cursor: pointer;
}
.prev{
    left: 0;
    border-radius: 0 18px 18px 0;
}
.next{
    right: 0;
    border-radius: 18px 0 0 18px;
}
.banner-btn{
    position: absolute;
    left: 30px;
    bottom: 20px;
    font-size: 0;
    /* width: 108px;
    height: 15px; */
}
.banner-btn li{
    display: inline-block;
    width: 8px;
    height: 8px;
    border: 1px solid rgba(0,0,0,.05);
    margin-right: 4px;
    border-radius: 50%;
    font-style: normal;
    background: rgba(255,255,255,.4);
    cursor: pointer;
    /* transition: background .2s ease; */
    
}
.banner-btn .active{
    position: relative;/*相对定位适合调整小距离的位移*/
    top: 2px;
    width: 9px;
    height: 9px;
    left: 0;
    border: 3px solid rgba(0,0,0,.1);
    background: rgba(255,255,255,1);
}
/* 轮播图结束du */

2.轮播图js

// 实现轮播图的切换==========================================
// 获取轮播图相关的元素
let img=document.querySelector('.img');
let next=document.querySelector('.next');
let prev=document.querySelector('.prev');
let slide=document.querySelector('.slide');
let lis=document.querySelectorAll('.banner-btn li');

// 定义图片名字的数组
let imgArr=['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg','8.jpg',];

// 定义图片的索引
let count=0;

// 封装一个函数，用来切换图片的路径
function cutImg(){
    img.src='./images/' + imgArr[count];
    
    // 去掉所有i的class
    for(let i=0;i<lis.length;i++){
        lis[i].className="";
    }
    // 给第count个li加上active类名
    lis[count].className='active';
}


// 设置定时器，每隔3秒切换图片
timer= setInterval(function(){
    count++;

    if(count>imgArr.length -1){
        count=0;
    }

    cutImg();
},2000);

// 点击下一张按钮
next.onclick=function(){
    count++;
    if(count>imgArr.length -1){
        count=0;
    }
    cutImg();
}
// // 点击上一张按钮
prev.onclick=function(){
    count--;
    if(count<0){
        count=imgArr.length -1;
    }
    cutImg();
}

// 鼠标移入div，将定时切换图片关闭  (给slide绑定光标移入事件)
slide.onmouseover=function(){
    clearInterval(timer);
}
// 鼠标移出div，将定时切换图片开启  (给slide绑定光标移出事件)
slide.onmouseout=function(){
    // 再次开启定时器，注意：定时器标识要与上方保持一致
    timer= setInterval(function(){
        count++;
        if(count>imgArr.length -1){
            count=0;
        }
        cutImg();
    },2000);
}

// 给li绑定点击事件
for(let i=0;i<lis.length;i++){
   lis[i].onclick =() => { 
    // 点击哪个li，就把count设为几
    count=i;
    cutImg();
    };
}