div轮播 点击数字图标以后轮播图片暂停，几秒后继续轮播

[wangyun_www]

内容描述：我用setInterval写了三秒切换轮播div文字。div切换，相应的数字图标切换，点击任一数字标切换到相应的div（比如点击“2”，div就显示第2个），显示3秒后继续轮播，而不是重新从1开始（即点击“2”三秒后从“3”开始）。
问题描述：1.点击以后没法继续轮播，试了很多都不行，所以接下来粘贴的有一段注释部分代码是获取当前点击的按钮id。
2.点击多次计时器无法一一清楚，所以点击多次以后计时器就开始乱了。
求帮忙解决

以下为代码：

<script>
$(function(){



var index=0;

var time0=setInterval(function(){

show(index);
index++;
if(index==3){index=0;}
},3000);
function show(index){
$(".d_d").eq(index).show().siblings().hide();
$(".d_s span").eq(index).css("background-color","#99c").siblings().css("background-color","#936");
}

$(".d_s span").click(function(e) {


var $index1=$(this).index();

$(".d_d").eq($index1).show().siblings().hide();
$(this).css("background-color","#99c").siblings().css("background-color","#936");


/*var time0=setInterval(function(){

show($index1);
$index1++;
if($index1==3){$index1=0;}
},3000);
*/
return false;
});

})
</script>
<style>
.d_d{
position:relative;
float:left;
width:100px;
}
.d_s span{
font-size:18px;
width:40px;
height:40px;
background-color:#936;
margin-right:10px;
color:#fff;}
.d_s span:hover{
background-color:#99C;
color:#fff;}

</style>
<div>
<div class="d_d">
a
</div>
<div class="d_d" style="display:none;">
b
</div>
<div class="d_d" style="display:none;">
c
</div>
</div>
<div class="d_s">
<span style="background-color:#99c;">1</span>
<span>2</span>
<span>3</span>

</div>

[当作看不见]

点击就是清楚掉轮播的计时事件，然后又开始新一轮轮播的计时。

[囧]

<script>
            $(function() {
                var index = 0, time0 = 0;
				function start(){
					time0 = setInterval(function() {
						show(index);
						index++;
						if (index == 3) {
							index = 0;
						}
					}, 3000);
				}
				function stop(){
					clearInterval(time0);
				}
                function show(index) {
                    $(".d_d").eq(index).show().siblings().hide();
                    $(".d_s span").eq(index).css("background-color", "#99c").siblings().css("background-color", "#936");
                }

                $(".d_s span").click(function(e) {
					stop();
                    var $index1 = $(this).index();
                    if(index != $index1){
						index = $index1;						
						show(index);	
					}
					start();
                });

				start();
            })
        </script>
        <style>
            .d_d{ position:relative; float:left; width:100px; } 
			.d_s span{ font-size:18px; width:40px; height:40px; background-color:#936; margin-right:10px; color:#fff;}
            .d_s span:hover{ background-color:#99C; color:#fff;}
        </style>
        <div>
            <div class="d_d">
                a
            </div>
            <div class="d_d" style="display:none;">
                b
            </div>
            <div class="d_d" style="display:none;">
                c
            </div>
        </div>
        <div class="d_s">
            <span style="background-color:#99c;">
                1
            </span>
            <span>
                2
            </span>
            <span>
                3
            </span>
        </div>

[yeyeyeyoye]

我觉得应该可以用 stop() ！