手机版渐隐轮播图

function getSlider() {
    $.ajax({
        type: "post",
        url: ctx + "/webservice/dish/pic",
        data: {resId: conditions.resid},
        dataType: "json",
        success: function(msg) {
            var len = msg.length;
            var n = 0 ;
            var htmlSpan = "";
            for (var j = 0; j < len - 1; j++) {
                htmlSpan += '<span>·</span>';
            }
            htmlSpan += '<span class="on">·</span>';
            var imgs = [];
            var img = [];
            img[0] = '<a href="' + ctx + '/webservice/dish/detail?id=';
            img[1] = '#';
            img[2] = '"><img src="';
            img[3] = '#';
            img[4] = '"></a>';

            for (var i = 0; i < len; i++) {
                img[1] = msg[i].id;
                img[3] = msg[i].pic;
                imgs.push(img.join(""));
            }
            $("#banner_list").html(imgs.join(""));
            $(".dots").html(htmlSpan);

            t = setInterval(function() {
                $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(n).fadeIn(1000);
                $(".dots span").eq(n).addClass("on").siblings().removeClass("on");
                n = (n === 2) ? 0 : ++n;
            }, 4000);

        }
    });
}

上面的函数是我今天写的一个手机轮播图的功能，从后台取得一组图片地址和跳转链接的数组，动态生成页面，同时，利用了一个定时器，用jQuery提供的方法，实现了一张一张渐隐的轮播，同时还有一排点在随轮播切换颜色。