js 轮播图 js和css

**let prev = document.querySelector(’.left_btn’);
let next = document.querySelector(’.right_btn’);
let wrap = document.querySelector(’.slider_ul’);
let sliderBox = document.querySelector(’.slide_box’);
let dots = document.querySelectorAll(’.circleBox span’);
console.log(sliderBox.offsetWidth)
let timer = null;
let index = 0;
// 向左移动
function nextPic() {
let step = 0;
if (wrap.offsetLeft == -2400) {
step = -1200;
}else {
step = wrap.offsetLeft -600;
}
wrap.style.left = step +‘px’
index++;
if (index > dots.length-1) {
index = 0;
}
showDotsCurrent()
}
// 向右移动
function prevPic() {
let step = 0;
if (wrap.offsetLeft == -600) {
step = -1800
}else {
step = wrap.offsetLeft +600
}
wrap.style.left = step+‘px’;
index–;
if (index < 0) {
index = dots.length-1;
}
showDotsCurrent()
}
next.addEventListener(‘click’,function() {
nextPic()

})
prev.addEventListener(‘click’, function() {
prevPic()
})
// 循环播放
function autoPlay() {
timer = setInterval(()=>{
nextPic()
},1000)
}
autoPlay()
// 鼠标移入盒子移出定时器
sliderBox.addEventListener(‘mouseenter’, function(){
clearInterval(timer)
})
sliderBox.addEventListener(‘mouseleave’, function(){
autoPlay()
})
function showDotsCurrent() {
for (let i = 0; i<dots.length; i++) {
dots[i].className = ‘’;
}
dots[index].className = ‘on’;
}
// 给小圆圈点击事件
for(let i = 0; i<dots.length; i++) {
// 立即执行函数
(function(i){
dots[i].onclick = function() {
let dis = index - i;
wrap.style.left = (wrap.offsetLeft + sliderBox.offsetWidth*dis )+ ‘px’;
index = i;
showDotsCurrent()
}
})(i)
}**

    li {
        list-style: none;
        float: left;
    }
    a {
        text-decoration: none;
    }
    ul {
        padding: 0;
        margin: 0;
        width: 3000px;
        height: 300px;
        position: absolute;
        left:-600px;
        
    }
    .clearfix:after {
        clear: both;
        display: block;
        content: '';
        height: 0;
        visibility: hidden;
    }
    .slide_box {
        /* position: relative; */
        width: 600px;
        height: 300px;
        /* border: 1px solid #ccc; */
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }
    .btn {
        width: 30px;
        height: 30px;
        background: silver;
        opacity: 0.5;
        text-align: center;
        line-height: 30px;
        border-radius: 50%;
        display: none;
    }
    .slide_box:hover .btn{
       
        display: block;
    }
    .btn:hover{
        opacity: .7;
        background: #585656;
        cursor: pointer;
    }
   
    .left_btn {
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -15px ;
    }
    .right_btn {
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -15px ;
    }
    .slide_img {
        width: 600px;
        height: 300px;
    }
    .circleBox {
        position: absolute;
        left: 50px;
        bottom: 20px;
    }
    .circleBox span {
        width: 20px;
        height: 20px;
        border: 1px solid #ccc;
        border-radius: 100%;
        margin-right: 10px;
        display: inline-block;
    }
    .circleBox span.on {
        background: red;
    }