<div>
<img src="1.jpg" alt="">
</div>
<ul>
<li class="a">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var i = 0;
var timer = null;
var img = document.getElementsByTagName("img")[0];
var lis = document.getElementsByTagName("li");
console.log(lis)
function start() {
timer = setInterval(function() {
i++;
step()
if (i > 4) {
i = 0;
}
// dot()
}, 2000)
}
start()
function step() {
// i++;
img.src = i + ".jpg";
for (var j = 0; j < lis.length; j++) {
lis[j].className = '';
}
lis[i - 1].className = 'a';
}
function cli() {
for (var k = 0; k < lis.length; k++) {
lis[k].id = k;
//console.log(lis[k].id);
lis[k].onmouseover = function() {
i = this.id;
//console.log(i)
// dot()
i++
step()
clearInterval(timer);
}
lis[k].onmouseout = function() {
i = this.id;
// change();
start();
// dot()
}
}
}
cli();
</script>