jQuery如何实现简单的图片轮播

$(function(){
    function onImgChange(){
        //初始化变量
        var $imgLi=$("#scroll_img").find("li");
        var $imgLi=$("#scroll_img li");//img li

        var $pageLi=$("#scroll_number li");//number li
        var index=0;//当前显示图片的索引
        var stop=false;//true:轮播停止，false：轮播正常显示

        //1、图片轮播
        //1.1、将第1图片显示并控制样式
        $imgLi.eq(index).show().siblings().hide();
        $pageLi.eq(index).addClass("scroll_number_over").siblings().removeClass("scroll_number_over");

        //1.2、开启定时函数：轮播图片
        //1.2.1、图片的切换
        setInterval(function(){
            if(stop) return;//判断是否进行图片轮播
            index++;
            if(index>$imgLi.length) index=0;

            $imgLi.eq(index).show().siblings().hide();
            $pageLi.eq(index).addClass("scroll_number_over").siblings().removeClass("scroll_number_over");
        },1000);

        //2、改变数字：图片切换（鼠标移入和移出事件）
        //2.1、设置数字的样式
        //2.2、切换到数字对应的图片
        $pageLi.mouseover(function(){
            //clearInterval()
            stop=true;
            //获得当前数字所在的索引位置
            index=$pageLi.index($(this));//用于获得当前数字在数组中的下标索引

            $imgLi.eq(index).show().siblings().hide();
            $pageLi.eq(index).addClass("scroll_number_over").siblings().removeClass("scroll_number_over");
        }).mouseout(function(){
            stop=false;
        });
    }

    onImgChange();
});

<!--轮换显示的横幅广告图片-->
        <div class="scroll_top"></div>
        <div class="scroll_mid">
            <!--图片显示-->
            <ul id="scroll_img">
                <li><img src="images/dd_scroll_1.jpg"/></li>
                <li><img src="images/dd_scroll_2.jpg"/></li>
                <li><img src="images/dd_scroll_3.jpg"/></li>
                <li><img src="images/dd_scroll_4.jpg"/></li>
                <li><img src="images/dd_scroll_5.jpg"/></li>
                <li><img src="images/dd_scroll_6.jpg"/></li>
            </ul>
            <!--数字显示-->
            <ul id="scroll_number">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
        </div>

//css样式:设置数字的背景颜色
.scroll_number_out{
}
.scroll_number_over{
    background-color:#F96;
    color:#FFF;
}