'
<div class="loop_pic">< img src="1.jpg"></div>
<div class="loop_pic">< img src="2.jpg"></div>
<div class="loop_pic">< img src="3.jpg"></div>
'
图片默认的display属性值为block，即块状元素，是可视的。
当diaplay属性值为none时，图片不可见。
利用这一特点，先使用css将所有图片的display属性设置为none
再使用js获取相同class的元素。
按顺序将其中一张图片的display属性设置为block，即有一张图片可见。
js代码：

var index=0;
function ChangeImg() {//改变图片
    index++;
    var a=document.getElementsByClassName("loop_pic");
    if(index>=a.length) index=0;//超过长度则重置角标，使其再从第一张图开始循环
    if (num>=b.length)num=0;
    for(var i=0;i<a.length;i++){
        a[i].style.display='none';//设置所有图片的display样式为none
    }
    a[index].style.display='block';//因为index在改变，所以每次执行会设置不同的图片可视
}
setInterval(ChangeImg,3000);//设置定时器，每隔三秒切换一张图片

最终效果：http://fx7.top/project/