如何在ASP.NET MVC中创建旋转广告块？

public class Advertisement
{
    public int Id { get; set; }
    public string ImageUrl { get; set; }
    public string Url { get; set; }
}

public ActionResult GetAdvertisements()
{
    // 这里可以从数据库或其他地方获取广告数据
    var advertisements = new List<Advertisement>
    {
        new Advertisement { Id = 1, ImageUrl = "/images/ad1.jpg", Url = "https://www.example1.com" },
        new Advertisement { Id = 2, ImageUrl = "/images/ad2.jpg", Url = "https://www.example2.com" },
        new Advertisement { Id = 3, ImageUrl = "/images/ad3.jpg", Url = "https://www.example3.com" },
    };

    return Json(advertisements, JsonRequestBehavior.AllowGet);
}

<div id="ad-carousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <!-- 这里将会动态添加广告 -->
    </div>
</div><script>
    $(function() {
        // 获取广告数据
        $.getJSON("@Url.Action("GetAdvertisements")", function(advertisements) {
            var $carouselInner = $("#ad-carousel .carousel-inner");

            // 遍历广告数据，创建广告项
            $.each(advertisements, function(index, advertisement) {
                var $item = $("<div>").addClass("carousel-item");
                if (index === 0) {
                    $item.addClass("active");
                }

                var $img = $("<img>").attr("src", advertisement.ImageUrl).addClass("d-block w-100");
                $img.attr("alt", advertisement.Url);
                $img.wrap("<a>").parent().attr("href", advertisement.Url);

                $item.append($img);
                $carouselInner.append($item);
            });
        });
    });
</script>

#ad-carousel {
    width: 300px;
    height: 200px;
    margin: auto;
}

#ad-carousel .carousel-item {
    text-align: center;
}