jQuery 轮播图版本一：（jquery.SuperSlide.2.1.1.js）做轮播图，底部带分页，箭头

效果如下：

 

 1.HTML部分

<div class="banner">
    <div class="example">
        <div class="ft-carousel" id="carousel_1">
            <div id="slideBox" class="slideBox">
                <div class="hd">
                    <!-- 前/后按钮代码 -->
                    <a class="prev" href="javascript:void(0)"><img src="__IMG__/index/black_left.png" /></a>
                    <a class="next" href="javascript:void(0)"><img src="__IMG__/index/black_right.png" /></a>
                    <span class="pageState color_fff font16px tc"></span>
                </div>
                <div class="bd">
                    <ul>
                        <li class="active">
                            <a href=""><img src="__IMG__/index/banner.jpg" alt="" /></a>
                        </li>
                        <li>
                            <a href=""><img src="__IMG__/index/banner.jpg" alt="" /></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
  </div>

2.css部分

.banner .example {
    overflow: hidden;
    width: 100%;
    margin:0 auto;
}
.banner .slideBox .bd ul{height:580px;overflow: hidden;}
.banner .slideBox{ width: 100%; height: 100%; margin: 0 auto;overflow:hidden; position:relative; }
.banner .slideBox .hd{ height:40px; position:absolute; z-index: 99;left:48%; bottom:40px;}
.banner .slideBox .hd ul{ overflow:hidden; zoom:1; float:left;}
.banner .slideBox .hd ul li{border-radius: 50%;margin-left: 5px; float:left; margin-right:2px;  width:20px; height:20px; line-height:20px; text-align:center; background:#fff; cursor:pointer; }
.banner .slideBox .hd ul li.on{ background:#ff9d00; color:#fff; }
.banner .slideBox .bd{ position:relative; height:100%; z-index:0; overflow: hidden;  }
.banner .slideBox .bd ul{height:580px;overflow: hidden;}
.banner .slideBox .bd img{height:580px; width: 100%;}

/* 前/后按钮代码 */
.banner .slideBox .prev{ position:absolute; z-index: 99;left:-50%; }
.banner .slideBox .next{ position:absolute; z-index: 99;right:-50%; }
/* 页码 */
.banner .slideBox .pageState{display: inline-block;width: 120px;letter-spacing: 5px;height: 40px;line-height: 40px;background: rgba(0, 0, 0, 0.5);border-radius: 20px;}
.banner .slideBox .pageState span{color:#ff9d00}

3.js部分

<script type="text/javascript" src="__JS__/common/jquery-1.9.1.min.js"></script>
 <script type="text/javascript" src="__JS__/common/jquery.SuperSlide.2.1.1.js"></script>

<script>

    $(function () {

      

 　　jQuery("#slideBox").slide(
         {
             mainCell: ".bd ul",
             effect: "left",
             autoPlay: true,
             mouseOverStop: true
         });

    })

</script>