Django博客搭建_新闻模块4-轮播图、热门新闻

Blog项目——新闻模块

一、轮播图

1. 分析

请求方法：GET

url定义：/news/banners/

请求参数：前端无需传入参数

2. 代码

2-1 前端html

我们将之前的轮播图进行删掉，只留下pic和tab这两个容器

      <!-- banner start -->
        <div class="banner">
            <ul class="pic"></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"></ul>
        </div>
      <!-- banner end -->

2-2 js代码

这是之前的轮播图代码，可以保留下来，我们来进行ajax的部分

    /*=== bannerStart ===*/
    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')