django之動態輪播圖技術的實現

一、分析

　　什么是動態輪播圖？簡而言之就是將輪播圖所展示的圖片動態化，不是直接寫死在頁面里，而是由后台數據庫來決定輪播的內容和輪播圖的數量。輪播圖數據表中存在多少輪播圖，

# 輪播圖
class Banner(BaseModel):
    image_url = models.URLField(default="", verbose_name="輪播圖鏈接")
    priority = models.IntegerField(verbose_name="優先級")
    news = models.OneToOneField("News", on_delete=models.CASCADE)

    class Meta:
        # 默認排序
        ordering = ["-update_time", "-id"]
        # 指明數據庫名
        db_table = "tb_banner"
        verbose_name = "輪播圖"
        verbose_name_plural = verbose_name

    def __str__(self):
        return f"Banner({self.id}, {self.image_url})"

我們就在前台展示多少，這要求動態的決定圖片和切換按鈕的數量

二、實現

banner.html

<div class="banner">
    <ul class="pic">
        <!--淡入淡出banner-->
        <li><a href="javascript:void(0);"><img src="../../static/images/ui.png" alt="test"></a></li>
        <li><a href="javascript:void(0);"><img src="../../static/images/youxi.png" alt="test"></a></li>
        <li><a href="javascript:void(0);"><img src="../../static/images/dianshang.png" alt="test"></a></li>
        <li><a href="javascript:void(0);"><img src="../../static/images/zimeiti.png" alt="test"></a></li>
        <li><a href="javascript:void(0);"><img src="../../static/images/python_gui.jpg" alt="test"></a></li>
        <li><a href="javascript:void(0);"><img src="../../static/images/linux.jpg" alt="test"></a></li>
    </ul>
    <a href="javascript:void(0);" class="btn prev">
        <i class="PyWhich py-arrow-left"></i></a>
    <a href="javascript:void(0);" class="btn next">
        <i class="PyWhich py-arrow-right"></i></a>
    <ul class="tab">
        <!-- 按鈕數量必須和圖片一致 -->
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

banner.js

fn_load_banner();

    // 輪播圖
    let $banner = $(".banner");
    let $picLi = $(".banner .pic li");
    let $prev = $(".banner .prev");
    let $next = $(".banner .next");
    let $tabLi = $(".banner .tab li");
    let index = 0;

    // 小圓點點擊事件
    $tabLi.click(function () {
        index = $(this).index();
        $(this).addClass("active").siblings("li").removeClass("active");
        $picLi.eq(index).fadeIn(1500).siblings("li").fadeOut(1500);
    });
    // 點擊切換上一張
    $prev.click(function () {
        index--;
        if(index < 0){
            index = $tabLi.length - 1;
        }
        $tabLi.eq(index).addClass("active").siblings("li").removeClass("active");
        $picLi.eq(index).fadeIn(1500).siblings("li").fadeOut(1500);

    }).mousedown(function () {
        return false;
    });

    // 點擊切換下一張
    $next.click(auto).mousedown(function(){
        return false;
    })

    function auto(){
        index ++;
        index %= $tabLi.length;
        $tabLi.eq(index).addClass("active").siblings("li").removeClass("active");
        $picLi.eq(index).fadeIn(1500).siblings("li").fadeOut(1500);
    }

    // 定時器
    let timer = setInterval(auto, 2000);
    $banner.hover(function () {
        clearInterval(timer);
    }, function () {
        auto();
    });

    function fn_load_banner(){
        $.ajax({
            url: "/news/banner/",
            type: "GET",
            async: false
        })
            .done(function (res) {
                if(res.errno === "0"){
                    let content = ``;
                    let tab_content = ``;
                    $(".pic").html("");
                    $(".tab").html("");
                    res.data.banner.forEach(function(one_banner, index){
                        // console.log(one_banner);
                        if(index === 0){
                            console.log(one_banner);
                            content = `
                            <li style="display:block;"><a href="/news/${one_banner.news_id}/">
                 <img src="${one_banner.image_url}" alt="${one_banner.news_title}"></a></li>
                            `;
                            tab_content = `
                            <li class="active"></li>
                            `
                        }
                        else{
                            console.log(one_banner);
                            content = `
                            <li><a href="/news/${one_banner.news_id}/"><img src="${one_banner.image_url}" alt="${one_banner.news_title}"></a></li>
                            `
                            tab_content = `
                            <li></li>
                            `
                        }
                        $(".pic").append(content);
                        $(".tab").append(tab_content);
                    })
                }
                else{
                    message.showError(res.errmsg);
                }
            })
            .fail(function(){
                message.showError('服務器超時，請重試！');
            })
    }

banner.py

def get_banner(request):
    banner = Banner.objects.only('image_url', 'news__title').select_related('news').filter(is_delete=False)\
        .order_by('priority')
    print(banner)
    banner_info = []
    for i in banner:
        banner_info.append({
            "image_url": i.image_url,
            "news_title": i.news.title,
            "news_id": i.news.id,
        })
    data = {
        "banner": banner_info
    }
    print(data)
    return ResultResponse(data=data)