#前端  （引入bootstrap）
<div class="lunbotu">
                    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                        <!-- Indicators -->
                        <ol class="carousel-indicators">
                            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                        </ol>

                        <!-- Wrapper for slides -->
                        <div class="carousel-inner" role="listbox">
                            <div class="item active">
                                <a href=""><img class="banner" src="" alt="..."></a>
                                <div class="carousel-caption">
                                </div>
                            </div>
                            <div class="item">
                                <a href=""><img class="banner" src="" alt="..."></a>
                                <div class="carousel-caption">
                                </div>
                            </div>
                            <div class="item">
                                <a href=""><img class="banner" src="" alt="..."></a>
                                <div class="carousel-caption">
                                </div>
                            </div>
                        </div>

                        <!-- Controls -->
                        <a class="left carousel-control" href="#carousel-example-generic" role="button"
                           data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control" href="#carousel-example-generic" role="button"
                           data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
#script
#通過ajax的get請求向后端要數(shù)據(jù)
#$(function () {}這個事件是等所有的頁面加載完成才執(zhí)行，是$(document).ready(function()的簡寫
$(function () {
    $.ajax({
        url:'/get_banner/',
        method:'get',
        success:function (data) {
            $.each(data,function (k,v) {
                $('.banner')[k].src = v.img_url
                $($('.banner')[k]).parent().attr('href',v.url)
                $($('.banner')[k]).parent().next().html(v.msg)
            })
        }
    })
})
#后端
def get_banner(request):
    l1 = [
        {'url':'http://hsgwh.huangshan.gov.cn/',
         'img_url':'/static/img/banner1.jpg',
         'msg':'<h3>黃山</h3><p>值得玩味的地方</p>'},
        {'url': 'http://www.liriver.com.cn/',
         'img_url': '/static/img/banner2.jpg',
         'msg': '<h3>桂林</h3><p>桂林山水甲天下</p>'},
        {'url': 'http://www.mount-tai.com.cn/layout_class_service_pic.aspx?id=222',
         'img_url': '/static/img/banner3.jpg',
         'msg': '<h3>泰山</h3><p>五岳之首</p>'},
    ]
    return JsonResponse(l1,safe=False)
##做成列表是為了可以后期增刪改