**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;
}