Unless you have an absolute need to write your own (due to odd display requirements or you are doing it as an exercise) you are going to save a lot of effort simplying getting an open source one off the internet. Bootstrap has one built in, there is a pretty good one called "Slick".
That said, from your code you are setting the
src to the literal string
"item" rather than the source path held in the variable
item, the line should look more like:
document.getElementById("slide").src = item;
The logic also has problem: after you call the function it'll set the source to each image in rapid succession so you'll pretty much just see the end one. It will also only cycle once.
What you need is more like:
function imageSlides(){
let imageArray = ["/imgs/cn1.jpg", "/imgs/cn2.jpg", "/imgs/cn3.jpg", "/imgs/cn4.jpg", "/imgs/cn5.jpg"];
var i = 0;
document.getElementById('silde').src = imageArray[i];
setInterval(() =>{
i += 1;
if(i === imageArray.length - 1) {
i = 0;
}
document.getElementById('silde').src = imageArray[i];
}, 2000);
}, 2000));
}
There are some things you can do to help tidy up the above, but hopefully it is clear enough, also I haven't tested it so there might be off-by-one errors.