鼠标停留事件求助

Question

<style>
.indexPage1{
    float:left;
    width:100px;
    height:50px;
    display:block;
    color:#cccccc;
}
.indexPage2{
    display:none;
}
#indexPage1{
    width:100px;
    height:50px;
    background-color:#551234;
}
#indexPage2{
    width:100px;
    height:50px;
    background-color:#771234;
}
#indexPage3{
    width:100px;
    height:50px;
    background-color:#991234;
}
#indexPage4{
    width:100px;
    height:50px;
    background-color:#bb1234;
}
#indexPage5{
    width:100px;
    height:50px;
    background-color:#dd1234;
}
#indexPage6{
    width:100px;
    height:50px;
    background-color:#ff1234;
}
</style>
<div id="imgContainer">
    <div id="main1" class="indexPage1"><img id="indexPage1" src="#" alt="图片一" /></div>
    <div id="main2" class="indexPage1"><img id="indexPage2" src="#" alt="图片二" /></div>
    <div id="main3" class="indexPage1"><img id="indexPage3" src="#" alt="图片三" /></div>
    <div id="main4" class="indexPage1"><img id="indexPage4" src="#" alt="图片四" /></div>
    <div id="main5" class="indexPage1"><img id="indexPage5" src="#" alt="图片五" /></div>
    <div id="main6" class="indexPage1"><img id="indexPage6" src="#" alt="图片六" /></div>
</div>
<script language='javascript'>
    var j=1, timerID = 0;
function _start(){
var divs = document.getElementById("imgContainer").getElementsByTagName("img");
timerID = setInterval("tupian()", 1500);
for(var i=0; i<divs.length; i++){
divs[i].onmouseover = function(){
clearInterval(timerID);
};
divs[i].onmouseout = function(){
timerID = setInterval("tupian()", 1500);
};
}
}
    function tupian(){
        document.getElementById("main" + j).className="indexPage1";
        for(i=1;i<=6;i++){
            if (j!=i){
                document.getElementById("main" + i).className="indexPage2";
            }
        }
        j = j < 6 ? j + 1 : 1;
    }
tupian();
_start();
   
</script>