my slide

HTML

<div>
  <ul>
    <li><img src=img-1.jpg alt="" class="red" />red</li>
    <li><img src=img-4.jpg alt="" class="green" />gren</li>
    <li><img src=img-3.jpg alt="" class="blue" />blue</li>
    <li><img src=img-2.jpg alt="" class="black" />black</li>
  </ul>
</div>

CSS

ul {
  display: inline-block;
  border: 2px solid #444;
  height: 200px;
  width: 100%;
  overflow: hidden;
  background: #eee;
  padding: 0px;
  margin: 0px;
}

li {
  list-style: none;
  /* because 100%(<ul>) / 4(<li>) = 25% */
  width: 25%;
  height: inherit;
  float:left;
}

li img {
  width: 100%;
  height: inherit;
  /* use inline-block or block so the image will not ignore the width style */
  display: inline-block;
}

.red {
 background-color: red;   
}
.green {
 background-color: green;   
}
.blue {
 background-color: blue;   
}
.black {
 background-color: black;   
}

JavaScript

var list = document.getElementsByTagName("li"),
	ul = document.getElementsByTagName("ul")[0];
  
function slide() {
	// use appendChild() to simply append the first image at the end of the <ul>
  ul.appendChild(list[0]);
}
setInterval(slide, 1500);