图片轮播

 <style>
    .one{margin-left:45%;margin-top:15%;width: 200px;height:180px;float: left;overflow:hidden;}
    .two{margin:0px;padding:0px;list-style:none;width:1005px;}
    .two li{float: left;}
    img{width:200px;height: 150px;}
    span{margin-left: 10px;}
</style>
<div class="one">
    <ul class="two">
        <li title="2"><img src="images/1.jpg" alt=""></li>
        <li title="3"><img src="images/5627.gif" alt=""></li>
        <li title="4"><img src="images/5815.gif" alt=""></li>
        <li title="5"><img src="images/xd.png" alt=""></li>
        <li title="1"><img src="images/5627.gif" alt=""></li>
    </ul>
    <span id='1'>1</span><span id='2'>2</span><span id='3'>3</span>
    <span id='4'>4</span><span id='5'>5</span>
</div>
<script src="js/j.js"></script>
<script>
    $('#1').css('color','red');
    function rollTwo(){
       $(".two").animate({marginLeft:"-200px"},2000,"linear",function(){
          $(".two").css({marginLeft:"0px"});
          var id = $(".two li:first").attr('title');
          if(id==1){
            var sid = 5;
          }else{
            var sid = id-1;
          }
          $('#'+sid).css('color','');
          $('#'+id).css('color','red');
          $(".two li:first").remove().clone(true).appendTo(".two");    
       })    
    }
    var startRollTwo=setInterval(rollTwo,2000);
    // 鼠标移入停止移出继续
    $(".two").hover(function(){
       clearInterval(startRollTwo);    
    },function(){
       startRollTwo=setInterval(rollTwo,2000);    
    });
</script>