focus焦点图(终结)

HTML结构：

<div id="tk">

  <div class="ilist">

    <ul>

      <li><img src="a1.jpg"/></li>

      <li><img src="a2.jpg"/></li>

      <li><img src="a3.jpg"/></li>

      <li><img src="1.jpg"/></li>

      <li><img src="2.jpg"/></li>

    </ul>

  </div>

</div>

CSS样式表:

<style>

*{padding:0;margin:0;}

ul,li{list-style:none;}

#tk{width:300px;}

.ilist{width:100%;height:150px;overflow:hidden;position:relative;margin:100px;}

.ilist .dot{position:absolute;left:35%;bottom:0px; z-index:100;}

.ilist .dot span{display:inline-block;font:25px/20px Verdana, Geneva, sans-serif;color:#999;}

.ilist ul{width:1800px;position:relative;left:0;}

.ilist ul li{float:left;height:150px;position:relative;}

.ilist .dot .btn{color:#9cf;}

</style>

JQUERY程序：

<script>

  $(function(){

    $(".ilist").append("uuuuu");

    var x=$(".ilist ul li").length;

    var wid=$(".ilist").width();

    $(".ilist ul li").css("width",wid);

    txt="<div class='dot'>";

    for(var k=0;k<x;k++){

      txt+="<span>&bull;</span>"

    }

    txt+="</div>";

    $(".ilist").append(txt);

    var index=0;

    $(".ilist .dot span:first").addClass("btn");

    $(".ilist .dot span").hover(function(){

      index=$(this).index();

      sc(index);

      })

    $(".ilist").hover(function(){

      clearInterval(aTimer)

    },function(){

    aTimer=setInterval(function(){

      if(index==x){

        df();

        index=0;

        $(".ilist .dot span").removeClass("btn");

            $(".ilist .dot span").eq(index).addClass("btn");

        }

      else{

        sc(index);

        index++;

        }

      },3000)

    }).trigger("mouseleave")   

    function df(){

      $(".ilist ul").append($(".ilist ul li:first").clone());

      $(".ilist ul").stop().animate({"left":-x*wid},2000,"easeOutQuart",function(){

        $(".ilist ul").css("left","0");

        //$(".ilist ul li:last").remove();

      });

    }

      function sc(index){

    wy=-index*wid;

    $(".ilist ul").stop().animate({"left":wy},2000,"easeOutQuart");

    $(".ilist .dot span").removeClass("btn");

    $(".ilist .dot span").eq(index).addClass("btn");

    }

  })

</script>