轮播图

<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>