求解 jquery写的焦点图 点击快了会乱

源码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://www.zthh79.com/common/javascript/library.js"></script>
<style type="text/css">
.flash-frame {
width: 302px;
float: left;
}
.flash {
width: 300px;
float: left;
padding: 2px 0 0 2px;
border: solid 1px #a7cff3;
margin: 10px 0 0 0;
position:absolute;
}
.flash span {
display:none;
position:relative;
}
.flash img {
width:298px;
height:250px;
}
.flash .vessel {
background:#CCC;
width:auto;
height:19px;
float:right;
top:-90px;
position:relative;
margin:0 12px 0 0;
text-align: center;
}
.flash .vessel .content {
width:24px;
height:19px;
float:left;
cursor:pointer;
margin:1xp 3px 1px 1px;
}
.select {
background:#FFF;
color:#F00;
}
.clicke{
background:#FFF;
color:#F00;
}
.flash p {
width: 95%;
line-height: 22px;
color: #0267ff;
text-align: center;
}
.flash p a {
color: #0267ff;
}
</style>
</head>
<body>
<div class="flash"> <span> <img src="http://images.csdn.net/20100603/93X14401.gif"/>
  <p> <a>0</a> </p>
  </span> <span> <img src="http://images.csdn.net/20100527/93x144-1.jpg"/>
  <p> <a>1</a> </p>
  </span> <span> <img src="http://images.csdn.net/20100511/93x132.gif"/>
  <p> <a>2</a> </p>
  </span> <span> <img src="http://images.csdn.net/20100510/vs2010.jpg"/>
  <p> <a>3</a> </p>
  </span>
  <div id="vessel" class="vessel"></div>
</div>
<script type="text/javascript">
var imgIndex=-2,imgTotal,time=6000,setTimeoutID,indexText;
imgTotal = $('.flash span').length;
$(window).load(function(){
   var strHTML="";
   for(i=0;i<imgTotal;i++){
   strHTML+="<div class=\"content\">"+(i+1)+"</div>";
   }
   $('.flash').find('div').html(strHTML);
   $('.flash').find('div').find(".content").hover(function(){
   $(this).addClass("select");
   
   },function(){
   $(this).removeClass("select");
   //setTimeoutID=window.setInterval("showImg();",time);
   });
   $('.flash').find('div').find(".content").click(function(){
   window.clearInterval(setTimeoutID);
   indexText = (parseInt($(this).html()))-1;
   $('.flash span').each(function(i){
  $('.flash span').eq(i).hide();
  $('.flash').find('div').find(".content").eq(i).removeClass("clicke");
  });
    $('.flash').mouseout(function(){
   setTimeoutID=window.setInterval("showImg();",time);
   });
$('.flash span').eq(indexText).fadeIn();
$(this).addClass("clicke");
   });
   });
showImg();
function showImg(){
imgIndex++;
$('.flash span').eq(imgIndex).fadeOut(600,function(){
  $('.flash span').eq(imgIndex+1).fadeIn(600,function(i){
  $('.flash').find('div').find(".content").eq(imgIndex+1).addClass("select"); $('.flash').find('div').find(".content").eq(imgIndex).removeClass("select");
  });
  if(imgIndex==(imgTotal-1)){
   $('.flash span').eq(0).fadeIn(600,function(){
  $('.flash').find('div').find(".content").eq(imgIndex+1).addClass("select"); $('.flash').find('div').find(".content").eq(imgIndex).removeClass("select");
  });
  imgIndex = -1;
  }
 });
}
setTimeoutID=window.setInterval("showImg();",time);
</script>
</body>
</html>

解决方案 »

  1.   

    http://vaivxuanzi.free.yangwhy.cn/Untitled-1.html
    这是演示页面
      

  2.   

    清除  自动切换有问题还有 当点击  序列 imgIndex
    的时候   返回的值有问题，自己多测测
      

  3.   

    搞定咯 结贴咯
    var imgIndex = -1, imgTotal, time = 3000, setTimeoutID, indexText, tt = 2;
    imgTotal = $(".flash span").length - 1;
    $(window).load(function () {
    var strHTML = "";
    for (i = 0; i <= imgTotal; i++) {
    strHTML += "<div class=\"content\">" + (i + 1) + "</div>";
    }
    $(".flash").find("div").html(strHTML);
    $(".flash").find("div").find(".content").hover(function () {
    $(this).addClass("select");
    }, function () {
    $(this).removeClass("select");
    });
    $(".flash").hover(function () {
    clearInterval(setTimeoutID);
    }, function () {
    setTimeoutID = window.setInterval("showImg();", time);
    });
    $(".flash").find("div").find(".content").click(function () {
    window.clearInterval(setTimeoutID);
    indexText = (parseInt($(this).html())) - 1;
    $(".flash span").filter(":visible").fadeOut(600, function () {
    $(".flash span").eq(indexText).fadeIn(600);
    });
    $(this).addClass("clicke");
    });
    });
    showImg();
    function showImg() {
    imgIndex++;
    tt++;
    $(".flash span").eq(tt).fadeOut(600, function () {
    $(".flash span").eq(imgIndex).fadeIn(600, function (i) {
    if (imgIndex == imgTotal) {
    imgIndex = -1;
    }
    });
    });
    if (tt == 3) {
    tt = -1;
    }
    }
    setTimeoutID = window.setInterval("showImg();", time);