超经典jquery+CSS+DIV实现图片轮换效果

//head部分
 <script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
        <script type="text/javascript">
            var curr = 0, next = 0, count = 0;
            $(document).ready(function() {
                // 记录图片的数量	
                count = $('#img_list a').size();

                t = setInterval('imgPlay()', 3000);

                // 鼠标移动到图片或导航上停止播放，移开后恢复播放	
                $('#imgs li, #img_list a').hover(function() {
                    clearInterval(t);
                }, function() {
                    t = setInterval('imgPlay()', 3000);
                });

                //点击导航播放到相应的图片		
                $('#img_list a').click(function() {
                    // index()函数返回当前导航的下标
                    var index = $('#img_list a').index(this);
                    if (curr != index) {
                        play(index);
                        curr = index;
                    };
                    return false;
                });
            });

            // 播放图片的函数
            var imgPlay = function() {
                next = curr + 1;
                // 若当前图片播放到最后一张，这设置下一张要播放的图片为第一张图片的下标
                if (curr == count - 1) next = 0;
                play(next);

                curr++;
                // 在当前图片的下标加1后，若值大于最后一张图片的下标，则设置下一轮其实播放的图片下标为第一张图片的下标，而next永远比curr大1
                if (curr > count - 1) { curr = 0; next = curr + 1; }
            };

            // 控制播放效果的函数
            var play = function(next) {
                // 当前的图片滑到左边-500px，完成后返回到右边490px
                // 下一张图片滑到0px处，完成后导航的焦点切换到下一个点上
                $('#imgs li').eq(curr).css({ 'opacity': '0.5' }).animate({ 'left': '-500px', 'opacity': '1' }, 'slow', function() {
                    $(this).css({ 'left': '714px' });
                }).end()
			.eq(next).animate({ 'left': '0px', 'opacity': '1' }, 'slow', function() {
			    $('#img_list a').siblings('a').removeClass('active').end().eq(next).addClass('active');
			});
            };

        </script>
        <style type="text/css">
        ul { list-style:none;}
img { padding:0px; border:0px solid #eee;}
a { outline:none;}
 
#imgs { width:714px; float:left; margin-bottom:0px;
                height: 215px;
            }
 
.mid { width:714px; repeat-y; padding:0px 0px 0;}
.mid ul { width:714px; height:215px; background:#fff; position:relative; overflow:hidden;}
.mid ul li { width:714px; height:215px; position:absolute; left:714px; top:0;}
.mid ul li.first { left:0;}
 
        </style>

//html部分
 <div id="imgs">
        <div class="mid">
            <ul>
                <li class="first"> <a href="#"><img src="images/index1.jpg"  width="714" height="215" alt="高皙专业男士化妆品" /></a></li>
                <li><a href="#"><img src="images/index2.jpg"  width="714" height="215" alt="诗婷露雅" /></a></li>
                <li><a href="#"><img src="images/index3.jpg"  width="714" height="215" alt="伊贝诗" /></a></li>//可以随你增加多少张图片
            </ul>
            <div id="img_list">
            	<a href="#1" class="active">1</a>
            	<a href="#2">2</a>
            	<a href="#3">3</a>//对应上面多少张图片增加多少<a></a>
            </div>

        </div>
    </div>