自动幻灯和点击切换 如何让点击的时候 从被点的那个继续往下走

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>点击图片切换</title>
  <style>
li{list-style:none;}
*{margin:0;padding:0;}
#tp{width:260px;height:300px;position:relative;margin:0 auto;}
#tp img{width:260px;height:300px;}
#tp ul{    width: 55px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -27px;}
#tp ul li{width:10px;height:10px;margin-top:10px;background:#fff;border-radius:50%;float:left;    margin-left: 3px;}
#tp .bs{background:blue;}
#tp span{position:absolute;top:0;right:0;}
#tp p{position:absolute;bottom:30px;right:0;margin:0;}
#tp span ,#tp p{width:260px;height:30px;line-height:30px;text-align:center;color:#666;}
</style> </head>
 <body>
<div id="tp">
<img/>
<span></span>
<p></p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>   <script>
var tp = document.getElementById("tp");
var oimg = tp.getElementsByTagName("img");  
var ospan = tp.getElementsByTagName("span");
var op = tp.getElementsByTagName("p");
var oul =tp.getElementsByTagName("ul");
var oli =tp.getElementsByTagName("li");
var atp = ["1.jpg","2.jpg","3.jpg","4.jpg"];
var awz = ["第1张图","第2张图","第3张图","第4张图"];
var num=0;
var time=null;
function aaa(){
oimg[0].src=atp[num];
ospan[0].innerHTML=num+1+"/"+atp.length;
op[0].innerHTML=awz[num];
for (var i=0;i<oli.length;i++)
{

oli[i].className="";
oli[num].className="bs";
}


num++;
num%=atp.length;
}
aaa();
for (var i=0;i<oli.length;i++)
{
oli[i].tt=i;
oli[i].onclick=function(){
for (var i=0;i<oli.length;i++)
{
oli[i].className="";
this.className="bs";
oimg[0].src=atp[this.tt];
ospan[0].innerHTML=this.tt+1+"/"+atp.length;
op[0].innerHTML=awz[this.tt]; }

}
}
tp.onmouseover=function(){
clearInterval(time);
};
tp.onmouseout=function(){
time=setInterval(aaa,1000);
}; time=setInterval(aaa,1000);
  </script>
 </body>
</html>
上面实现了自动幻灯 和点击切换幻灯 但是比如当自动幻灯幻到第三张图片的时候， 我点击第一张图 我就希望下一张图的幻灯是第二张 而不是往第四张走   意思就是当我点击任意一张幻灯图的时候 我希望被点之后都能从我点的下一张图开始 而不是它随意自动幻灯 不知道这样说清楚没有