典型又简单的一个首页焦点图片的代码

        //show_slider
        function show_slider($elem ,class_name ,time){
            var $controls = $elem.find(".control");
            var $sliders = $controls.prev();
            var i = 0 ; //当前索引
            var count = $sliders.children().length;
            var interVal;
            //手动变化
            $controls.find("a").live('mouseover',function(){
                i = $controls.find("a").index($(this));
                //这两句代码冗余有待优化
                $(this).addClass(class_name).siblings().removeClass(class_name);
                $sliders.children().eq(i).stop().fadeIn().siblings(1000).fadeOut(1000);
            })
            //自动切换方法
            function autoMove(){
                if(!$sliders.children().is(':animated')){
                    i = (i+1)%count;
                    $controls.children().eq(i).addClass(class_name).siblings().removeClass(class_name);
                    $sliders.children().eq(i).stop().fadeIn().siblings(1000).fadeOut(1000);
                }
            }
            //开启自动切换
            interVal = setInterval(autoMove,time);
        }

html代码

                    <div class="slide">
                        <ul>
                            <li class="selected">
                                <a href="shop_index.html"><img src="images/items/s1.jpg" alt=".." title="1111"></a>
                            </li>
                            <li>
                                <a href="shop_index.html"><img src="images/items/s1.jpg" alt=".." title="222222"></a>
                            </li>
                            <li>
                                <a href="shop_index.html"><img src="images/items/s1.jpg" alt=".." title="3333"></a>
                            </li>
                            <li>
                                <a href="shop_index.html"><img src="images/items/s1.jpg" alt=".." title="444444"></a>
                            </li>
                        </ul>
                        <!-- control  -->
                        <div class="control">
                            <a href="javascript:;" title="1" class="on">1</a>
                            <a href="javascript:;" title="2">2</a>
                            <a href="javascript:;" title="3">3</a>
                            <a href="javascript:;" title="4">4</a>
                        </div>
                        <!-- e control  -->
                    </div>