轮播图按钮加定时器

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第25天，点击查看活动详情

页面布局：

  <div class="tfoot_f">
    <div class="tfoot_c">
        <p><a href="javascript:;" style="color: black;">热门推荐</a></p>
        <p>
            <span class="spansa">1</span>
            <span>/</span>
            <span>8</span>
        </p>
        <p id="yuan_left"><span>&lt;</span></p>
        <p id="yuan_right"><span>&gt;</span></p>
    </div>
    <div class="tfoot_d"></div>
    <!-- 第一图片 -->
    <div class="tfoot_f_tu" style="z-index: 1;">
        <div class="tfoot_f_tu_left">
            <img src="./image/警察荣誉1.jpg" alt="">
        </div>
        <div class="tfoot_f_tu_right">

            <p>高分剧《警察荣誉》主演李晓川</p>
            <p>八里河的三缕人间烟火气。</p>

        </div>
    </div>
    <!-- 第二图片 -->
    <div class="tfoot_f_tu">
        <div class="tfoot_f_tu_left">
            <img src="./image/警察荣誉3.jpg" alt="">
        </div>
        <div class="tfoot_f_tu_right">
            <p>高分剧《警察荣誉》主演宁理</p>
            <p>我在八里河的日子。</p>
        </div>
    </div>
    <!-- 第三图片 -->
    <div class="tfoot_f_tu">
        <div class="tfoot_f_tu_left">
            <img src="./image/警察荣誉2.jpg" alt="">
        </div>
        <div class="tfoot_f_tu_right">
            <p>《怪奇物语》第四季中字预告</p>
            <p>小11米莉·波比·布朗等主演悉数回归，第二辑7月1日上线!</p>
        </div>
    </div>
    <!-- 第四图片 -->
    <div class="tfoot_f_tu">
        <div class="tfoot_f_tu_left">
            <img src="./image/警察荣誉4.jpg" alt="">
        </div>
        <div class="tfoot_f_tu_right">
            <p>「豆瓣2021年度电影榜单」揭晓</p>
            <p>点击查看完整榜单，开启全年佳片好剧大赏。</p>
        </div>
    </div>
    <!-- 第五图片 -->
    <div class="tfoot_f_tu">
        <div class="tfoot_f_tu_left">
            <img src="./image/警察荣誉6.jpg" alt="">
        </div>
        <div class="tfoot_f_tu_right">
            <p>《阿凡达2》官方中字预告</p>
            <p>詹姆斯·卡梅隆回归执导，展现潘多拉星球水世界!</p>
        </div>
    </div>
    <!-- 第六图片 -->
    <div class="tfoot_f_tu">
        <div class="tfoot_f_tu_left">
            <img src="./image/警察荣誉5.jpg" alt="">
        </div>
        <div class="tfoot_f_tu_right">
            <p>《权游》前传《龙之家族》预告</p>
            <p>聚焦《权力的游戏》故事发生200年前，龙家坦格利安家族的故事。8月21日HBO播出!</p>
        </div>
    </div>
    <!-- 第七图片 -->
    <div class="tfoot_f_tu">
        <div class="tfoot_f_tu_left">
            <img src="./image/警察荣誉7.jpg" alt="">
        </div>
        <div class="tfoot_f_tu_right">
            <p>《蜘蛛侠:平行宇宙》续集中字</p>
            <p>《蜘蛛侠:纵横宇宙(上)》延期至2023年6月2日北美上映，《蜘蛛侠:纵横宇宙(下）》官宣2024年3月29日北美上映!</p>
        </div>
    </div>
    <!-- 第八图片 -->
    <div class="tfoot_f_tu">
        <div class="tfoot_f_tu_left">
            <img src="./image/警察荣誉8.jpg" alt="">
        </div>
        <div class="tfoot_f_tu_right">
            <p>新海诚新作《铃芽关门》预告</p>
            <p>新海诚继《你的名字。》《天气之子》之后最新力作，11月11日日本上映!。</p>
        </div>
    </div>
</div>

页面样式：

  <style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        text-decoration: none;
        list-style: none;
    }

让body的儿子tfoot_f在页面居中显示

    body {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .tfoot_f {
      border: 1px solid #ccc;
        height: 400px;
        width: 675px;
    }

让tfoot_c的子内容flex布局

    .tfoot_c {
        display: flex;
        font-size: 13px;
        margin-top: 50px;
        line-height: 30px;
      }

    .tfoot_c p {
        margin-right: 15px;

    }

    .tfoot_c p:nth-child(1) {
        font-size: 16px;
    }

两个按钮

    #yuan_left,
    #yuan_right {
    ⚪
        width: 20px;
        height: 20px;
        border-radius: 10px;
        background-color: #369;
         display: block;
        margin-top: 5px;
        text-align: center;
        color: white;
        justify-content: center;
        display: flex;
    }

    #yuan_left span,
    #yuan_right span {
        line-height: 20px;
    }

    .tfoot_f .tfoot_c p:nth-child(2) {
        margin-left: 480px;
    }

    .tfoot_f_tu {
        width: 675px;
        height: 240px;
        background-color: pink;
        display: flex;
    }

    .tfoot_f_tu_right {
        background-color: #F9F9F9;
        width: 337px;
    }

    .tfoot_f_tu_left {
        width: 338px;
    }

    .tfoot_f_tu p:nth-of-type(1) {
        font-size: 20px;
        width: 326px;
        margin-top: 50px;
        margin-left: 35px;

    }

    .tfoot_f_tu p:nth-of-type(2) {
        font-size: 14px;
        width: 280px;
        margin-top: 20px;
        margin-left: 30px;
    }

    .tfoot_f .tfoot_d {
        margin: 20px 0;

    }

    .tfoot_f {
        position: relative;
    }

    .tfoot_f_tu {
        position: absolute;
    }
</style>

jquery写轮播图

先引入js

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  

最后轮播图

  <script>
  先定义index=0
let index = 0
点击右边按钮，index+1，
一共八张图片，对应下标为0-7，当index>7就回到第一张图片
    $("#yuan_right").click(function () {
        index++
        if (index > 7) {
            index = 0
        }
        页数里面的内容也跟着变
        $(".spansa").html(index + 1)
      第几个.tfoot_f_tu  盒子显示，他的兄弟隐藏$(".tfoot_f_tu").eq(index).fadeIn().siblings(".tfoot_f_tu").fadeOut()
    })
    $("#yuan_left").click(function () {
        index--
        if (index < 1) {
            index = 7
        }
        $(".spansa").html(index + 1)
        $(".tfoot_f_tu").eq(index).fadeIn().siblings(".tfoot_f_tu").fadeOut()
    })
    
    定时器5秒切换一次
    setInterval(function () {
        index++
        if (index > 7) {
            index = 0
        }
        $(".spansa").html(index + 1)
        $(".tfoot_f_tu").eq(index).fadeIn().siblings(".tfoot_f_tu").fadeOut()
    }, 5000)
</script>