简易的轮播效果实现

  <script type="text/javascript">
        var count=0,t;
        $(function(){
            show();
            stop();
        });
        function show(){
            count=(count==4?0:count);
            $("#scroll ul li").eq(count).show().siblings().hide();
            $("#scroll  .slide-controls span").eq(count).addClass("active").siblings().removeClass("active");
            count=count+1;
            t=setTimeout(function(){
                show();
            },1000)
        }
        function stop(){
            $("#scroll  .slide-controls span").mouseover(function(){
                $(this).addClass("active").siblings().removeClass("active");
                clearTimeout(t);
                count=$(this).text()-1;
                $("#scroll ul li").eq($(this).text()-1).show().siblings().hide();
            }).mouseleave(function(){
                show();
            });
        }

       </script>

  <div id="scroll">
            <ul>
                <li class="hide">
                    <img οnlοad="AutoResizeImage(680,0,this)" src="img/1.jpg"></img>
                </li>
                <li class="hide">
                    <img οnlοad="AutoResizeImage(680,0,this)" src="img/2.jpg"></img>
                </li>
                <li class="hide">
                    <img οnlοad="AutoResizeImage(680,0,this)" src="img/3.jpg"></img>
                </li>
                <li class="hide">
                    <img οnlοad="AutoResizeImage(680,0,this)" src="img/4.jpg"></img>
                </li>
            </ul>
            <div class="slide-controls">
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
            </div>
       </div>