jQuery图片轮播的具体实现

效果如下：

先看一看html代码，以及对应的css代码：

用绝对定位设置列表 num 的位置，对 li 设置相关样式，on 表示显示图片对应的数字列表中 li 的样式类别。

接下来是 js 代码：

    function showImg(index) {
        var adHeight = $("#scrollPics>ul>li:first").height();
        $(".slider").stop(true, false).animate({
            "marginTop": -adHeight * index + "px"    //改变 marginTop 属性的值达到轮播的效果
        }, 1000);
        $(".num li").removeClass("on")
            .eq(index).addClass("on");
    }