90%的网站都会有一个banner图片轮播，只是大小不一样而已。前段时间自己用jquery写了一个banner轮播的插件，分享给大家。

下面是html代码结构：

<div class="play_box"><!--动画盒子,切换的时间间隔、图片宽度，根据具体情况请到JS中修改相应参数-->

    <div class="imgBox">
        <img alt="" src="images/banner01.jpg" />
        <img alt="" src="images/banner02.jpg" />
        <img alt="" src="images/banner03.jpg" />
        <img alt="" src="images/banner04.jpg" />  
    </div>

    <span class="prev" title="上一张"></span>
    <span class="next" title="下一张"></span>

</div><!--动画盒子结束-->

CSS代码就不贴了，等下我会打包到文件中供大家下载使用。

下面是JS代码（附详细注释）：

$(document).ready(function () {

    var img_length89 = $(".imgBox img").length; //获取图片张数


    /////////////////////请根据具体情况修改这里的参数////////////////////////////////////////////////////

 //参数初始化设置

    img_animate(1002, img_length89, 3000, 'ddd');

  //////上面括号中的参数依次为图片的宽度（根据自己网页banner的宽度作相应设置），一共有几张图片（这个会自动判断不用手动写入），图片切换间隔几秒（1000为一秒），图片下方的小按钮获得焦点时的类名(这个类名修改后，须在CSS文件中修改相应的CSS设置，建议不修改。)

 //////////////////////////////////////////////////////////////////////////////////////////////////////////////////

 var img_number = 1;  //图片当前处于第几张

/////下一张、、、、、、、三个参数分别是图片宽度，图片总数量，跟图片相对应的小按钮的类名

 function next_btn(img_width, img_quantity, pic_btn_name) {

 $(".pic_btn_list li").removeClass(pic_btn_name); //去掉类名为.pic_btn_list元素下的li标签的pic_btn_name类名;

//给下一张图片相对应的li标签小按钮设置一个类名pic_btn_name，因为img_number从1开始，而li标签的遍历是从0开始。

 $(".pic_btn_list li:eq(" + img_number + ")").addClass(pic_btn_name);

 if (img_number == img_quantity) {//如果已经是最大数（指最后一张图片）

        $(".pic_btn_list li:eq(0)").addClass(pic_btn_name); //给第一个li标签设置类名。

        //////执行相应的动画

        $(".imgBox img").animate({