Вариант №2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#slider {
width: 100px;
height: 100px;
}
.color1 {
background-color: red;
}
.color2 {
background-color: green;
}
.color3 {
background-color: black;
}
.color4 {
background-color: yellow;
}
.color5 {
background-color: fuchsia;
}
</style>
</head>
<body>
<div id="slider"></div>
<script>
(function changeColor(currentNumber){
currentNumber++;
if(currentNumber >5){
currentNumber = 1;
}
document.getElementById('slider').setAttribute('class', 'color' + currentNumber);
setTimeout(function(){
changeColor(currentNumber)
}, 1000);
})(0);
</script>
</body>
</html>