<div class="slide"> <ul class="pics">    <li><a href="#"><img src="images/slide-1.jpg" /></a></li>        <li><a href="#"><img src="images/slide-4.jpg" /></a></li>        <li><a href="#"><img src="images/slide-5.jpg" /></a></li>    </ul>    <div class="num">    <span >1</span>        <span >2</span>        <span>3</span>    </div></div><script type="text/javascript" src="scripte/jquery-1.7.2.min.js"></script><script type="text/javascript">$(document).ready(function(e) {      var cur=0;     $(".num>span:first").addClass("on"); function zidong(){ cur++; if(cur>=$(".pics>li").length){ cur=0; } $(".pics>li").hide(); $(".pics>li").eq(cur).show(); $(".num>span").removeClass("on"); $(".num>span").eq(cur).addClass("on");  } var id=setInterval(function(){zidong();},1000); $(".num>span").mouseover(function(){ var now=$(this).index(); cur=now; clearInterval(id); $(".pics>li").hide(); $(".pics>li").eq(cur).show(); $(".num>span").removeClass("on"); $(".num>span").eq(cur).addClass("on"); } ); $(".num>span").mouseout(function(){ setInterval(function(){ zidong();},1000); } );});