I want to move the slide when I press the button on the slide. But I can not. Changing the button's css to active was successful, but when I pressed the button, it continued to fail to move the screen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin:0; padding: 0;}
li{list-style: none;}
.dots{width:20px; height: 20px; border-radius: 50%; background-color: #124412;}
.active{width:20px; height: 20px; border-radius: 50%;background-color: #fff;}
#slide{}
#slide ul
#slide ul li{}
.container{width: 900px; margin: 0 auto;}
</style>
</head>
<body>
<div id="slide_wrap">
<div class="container">
<div id="slide">
<ul>
<li><a href="#"></a><img src="slideimg/1.jpg" alt="1"></li>
<li><a href="#"></a><img src="slideimg/2.jpg" alt="2"></li>
<li><a href="#"></a><img src="slideimg/3.jpg" alt="3"></li>
<li><a href="#"></a><img src="slideimg/4.jpg" alt="4"></li>
<li><a href="#"></a><img src="slideimg/5.jpg" alt="5"></li>
</ul>
</div>
<div id="dot">
</div>
<div id="arrow">
<div id="left-arrow">left</div>
<div id="right-arrow">right</div>
</div>
</div>
</div>
<script>
var width = 640;
var height = 480;
var length = document.querySelectorAll('#slide li').length;
var slide = document.querySelector('#slide');
var slideUl = document.querySelector('#slide ul');
var slideLi = document.querySelectorAll('#slide li');
slide.style.width = width + "px";
slide.style.height = height + "px";
slide.style.overflow = "hidden";
slideUl.style.width = width*length +"px";
for(var i=0; i < slideLi.length; i++){
var item = slideLi.item(i);
item.style.width = width + "px";
item.style.height = height + "px";
item.style.cssFloat = "left";
}
var dot = document.getElementById('dot');
for(var i = 0; i < slideLi.length; i++){
var btn = document.createElement('button');
btn.classList.add('dots');
dot.appendChild(btn);
//btn.setAttribute('onclick','moveTo('+i+')');
}
var dots = document.querySelectorAll('.dots');
function moveTo(index){
index = index || 0;
index = index % length;
slideUl.style.marginLeft = "-"+width*index+"px";
for(var i = index ; i < dots.length ; i++){
for(var j = 0; j < dots.length ; j++){
if(dots[j].classList.contains('active')){
dots[j].classList.remove('active');
}
}
dots[index].classList.add('active');
}
}
for(var i = 0 ; i < dots.length ; i++){
dots[i].addEventListener('click', function(e){
for(var j = 0 ; j < dots.length ; j++){
if(dots[j].classList.contains('active')){
dots[j].classList.remove('active');
}
e.target.classList.add('active').moveTo(i);
}
})
}
var index = 0;
//left
function slideLeft(){
slideUl.style.marginLeft = "-"+width*(index-1)+"px";
index--;
}
//left click
var arrowLeft = document.getElementById('left-arrow');
arrowLeft.addEventListener('click', function(){
console.log(index)
if(index === 0){
index = slideLi.length;
}
slideLeft();
});
//right
function slideRight(){
slideUl.style.marginLeft = "-"+width*index+"px";
index++;
}
//right click
var arrowLeft = document.getElementById('right-arrow');
arrowLeft.addEventListener('click', function(){
console.log(index)
if(index === length){
index = 0;
}
slideRight();
});
var currentIndex = 0;
setInterval(function(){
currentIndex += 1;
moveTo(currentIndex)
},1000 * 1.5);
moveTo(0)
</script>
</body>
</html>
