JQUERY焦点图(简单版)

HTML结构：

<div id="sc">

  <div class="dot">

    <span>&bull;</span>

    <span>&bull;</span>

    <span>&bull;</span>

    <span>&bull;</span>

    <span>&bull;</span>

  </div>

  <ul>

    <li><img src="1.jpg" width="570" height="360" /></li>

    <li><img src="2.jpg" width="570" height="360" /></li>

    <li><img src="3.jpg" width="570" height="360" /></li>

    <li><img src="4.jpg" width="570" height="360" /></li>

    <li><img src="5.jpg" width="570" height="360" /></li>

  </ul>

</div>

CSS样式：

<style>

*{padding:0;margin:0;}

ul,li{list-style:none;}

#sc{width:570px;height:360px;overflow:hidden;position:relative;margin:100px;}

#sc .dot{position:absolute;right:10px;bottom:20px; z-index:100;}

#sc .dot span{display:inline-block;font:35px/25px Verdana, Geneva, sans-serif;color:#9cf;}

#sc ul{width:3500px;position:absolute;left:0;top:0; z-index:1;}

#sc ul li{float:left;width:570px;height:360px;}

#sc .dot .btn{color:#fff;}

</style>

JS程序：

<script>

  $(function(){

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

    var wid=$("#sc ul li").width();

    var index=0;

    $("#sc .dot span:first").addClass("btn")

    $("#sc .dot span").hover(function(){

      index=$(this).index();

      $("#sc .dot span").removeClass("btn")

      $("#sc .dot span").eq(index).addClass("btn")

      sc(index)

    },function(){

    })

    $("#sc").hover(function(){

      clearInterval(aTimer)

    },function(){

    aTimer=setInterval(function(){

      sc(index);

      $("#sc .dot span").removeClass("btn")

      $("#sc .dot span").eq(index).addClass("btn")

      index++;

      if(index == x) {index = 0;}

      },3000)

    }).trigger("mouseleave")   

      function sc(index){

    wy=-index*wid

    $("#sc ul").stop().animate({"left":wy},500)

    }

  })

</script>