轮播

html

<div class="banner">
       <ul id="banner_ul">
              <li id="first"><img src="images/banner1.gif"/></li>
               <li><img src="images/banner2.gif"/></li>
                 <li><img src="images/banner3.gif"/></li>
                 <li><img src="images/banner4.gif"/></li>
                 <li><img src="images/banner5.gif"/></li>
        </ul>
        <div class="shownav">
        </div>
</div>

css

#banner_ul{
    position: absolute;
    list-style: none;
    margin-left: 0;
}
#banner_ul li{
    display: none;
    margin-left: -40px;
}
#banner_ul li#first{
    display: block;
}
.shownav {
    position: relative;
    top: 125px;
    left: 380px;
       width: 400px;
}
.shownav span {
    display: inline-block;/*相当于display:block；和float:left;连用，而且使用vertical-align: bottom;有效*/
    /*float:left;*/
    margin-right:2px;
    text-align: center;
    cursor: pointer;
    font-family: Arial;
    cursor: pointer;
    vertical-align: bottom;
}
.span{
    width: 16px;
    height:16px;
    color:#ff7300;
    background-color: #fff;
    border: 1px solid #ff7300;
    line-height: 16px;
    font-size: 12px;

}
.highlight{
    width: 21px;
    height: 21px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    line-height: 21px;
    color: #fff;
    background-color: #ff7300;
}

jquery

//图片轮播

    var $li=$("#banner_ul li");
    var li_num=$("#banner_ul li").length;
    for(var i=1;i<li_num+1;i++){
        $(".shownav").append("<span class='span'>"+i+"</span>");
    }
    $("span").eq(0).addClass("highlight");
    //手动轮播
    $(".span").mouseover(function(){
         var span_num=$(this).html();
         for(index=0;index<li_num;index++){
             if(index==span_num-1){
                 $("#banner_ul li").eq(index).show();
                 $("span").eq(index).addClass("highlight").removeClass("span");
             }else{
                 $("#banner_ul li").eq(index).hide();
                 $("span").eq(index).removeClass("highlight").addClass("span");
             }
         }
    })
    //自动轮播
    var $li_now=$li.find(":visible");
    var index=$li_now.index();
    var time=setInterval(function(){
        show(index+1);//解决了第一个和第二个的延时问题
        index++;
        if (index==li_num){
            index=0;
        }
    },4000);

    function show(index){//一定要传参
        $li.eq(index).show().siblings($li).hide();
        $(".shownav span").eq(index).addClass("highlight").siblings("span").removeClass("highlight").addClass("span");
    }
        
    $(".shownav span").hover(function(){
        clearInterval(time);
        $(this).addClass("highlight").siblings("span").removeClass("highlight").addClass("span");
        },function(){
          if($(this).index()==3){
                index=0;
          }
          else{
               index=$(this).index()-0+1;
          }
          time=setInterval(function(){
                show(index);
                index++;
                if (index==li_num){
                    index=0;
                }
          },4000);
    })