Jquery--------图片轮放

   

javascipt代码部分：

<script src="js/jquery-2.2.4.js"></script>

    <script>




    $(function(){
        var index =1;
        var s ;
        $("#scroll_number li").mouseover(function(){
            $("#scroll_number li").removeClass("bgcolor");
            window.clearInterval(s);//清楚计时器
            $(this).addClass("bgcolor");
            var indexs = $(this).index();//获取当前li的index


            $("#scroll_img li").find("img").hide();//先影藏所有图片
            $("#scroll_img li").eq(indexs).find("img").show();//显示图片




        }).mouseout(function(){
            index=0;
            s=window.setInterval(tmpFun,1000);
            $(this).removeClass("bgcolor");
        });




        tmpFun=function(){


            if(index==6)
            {
                index=0;
            }


            $("#scroll_number li").removeClass("bgcolor");
            $("#scroll_number li").eq(index).addClass("bgcolor");//匹配li索引


            $("#scroll_img li").find("img").fadeOut(700);//先影藏所有图片
            $("#scroll_img li").eq(index).find("img").fadeIn(700);//显示图片


            index++;


        };
        s=window.setInterval(tmpFun,1500);






    })

</script>

html代码部分：

     <div class="scroll_mid">
            <ul id="scroll_img">
                <li><img src="images/dd_scroll_1.jpg" id="img1"/></li>
                <li><img src="images/dd_scroll_2.jpg" id="img2"/></li>
                <li><img src="images/dd_scroll_3.jpg" id="img3"/></li>
                <li><img src="images/dd_scroll_4.jpg" id="img4"/></li>
                <li><img src="images/dd_scroll_5.jpg" id="img5"/></li>
                <li><img src="images/dd_scroll_6.jpg" id="img6"/></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>