• JS:轮播图终极版

    轮播图：可触发效果

    ：1、按箭头符号可左右切换图片

    2、到最后一张的下一张是开头第一张；开头第一张的前一张是最后一张

    3、鼠标放在轮播图上时轮播图停止定时器；鼠标移开定时器继续开启

    注意：图片需要自己准备且对应

    部分HTML代码：

    1. DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8" />
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    8.   <title>轮播图点击切换title>
    9.   <style>
    10.     * {
    11.       box-sizing: border-box;
    12.     }
    13.  
    14.     .slider {
    15.       width: 560px;
    16.       height: 400px;
    17.       overflow: hidden;
    18.     }
    19.  
    20.     .slider-wrapper {
    21.       width: 100%;
    22.       height: 320px;
    23.     }
    24.  
    25.     .slider-wrapper img {
    26.       width: 100%;
    27.       height: 100%;
    28.       display: block;
    29.     }
    30.  
    31.     .slider-footer {
    32.       height: 80px;
    33.       background-color: rgb(100, 67, 68);
    34.       padding: 12px 12px 0 12px;
    35.       position: relative;
    36.     }
    37.  
    38.     .slider-footer .toggle {
    39.       position: absolute;
    40.       right: 0;
    41.       top: 12px;
    42.       display: flex;
    43.     }
    44.  
    45.     .slider-footer .toggle button {
    46.       margin-right: 12px;
    47.       width: 28px;
    48.       height: 28px;
    49.       appearance: none;
    50.       border: none;
    51.       background: rgba(255, 255, 255, 0.1);
    52.       color: #fff;
    53.       border-radius: 4px;
    54.       cursor: pointer;
    55.     }
    56.  
    57.     .slider-footer .toggle button:hover {
    58.       background: rgba(255, 255, 255, 0.2);
    59.     }
    60.  
    61.     .slider-footer p {
    62.       margin: 0;
    63.       color: #fff;
    64.       font-size: 18px;
    65.       margin-bottom: 10px;
    66.     }
    67.  
    68.     .slider-indicator {
    69.       margin: 0;
    70.       padding: 0;
    71.       list-style: none;
    72.       display: flex;
    73.       align-items: center;
    74.     }
    75.  
    76.     .slider-indicator li {
    77.       width: 8px;
    78.       height: 8px;
    79.       margin: 4px;
    80.       border-radius: 50%;
    81.       background: #fff;
    82.       opacity: 0.4;
    83.       cursor: pointer;
    84.     }
    85.  
    86.     .slider-indicator li.active {
    87.       width: 12px;
    88.       height: 12px;
    89.       opacity: 1;
    90.     }
    91.   style>
    92. head>
    93.  
    94. <body>
    95.   <div class="slider">
    96.     <div class="slider-wrapper">
    97.       <img src="./imgs/slider01.jpg" alt="" />
    98.     div>
    99.     <div class="slider-footer">
    100.       <p>对人类来说会不会太超前了？p>
    101.       <ul class="slider-indicator">
    102.         <li class="active">li>
    103.         <li>li>
    104.         <li>li>
    105.         <li>li>
    106.         <li>li>
    107.         <li>li>
    108.         <li>li>
    109.         <li>li>
    110.       ul>
    111.       <div class="toggle">
    112.         <button class="prev"><button>
    113.         <button class="next">>button>
    114.       div>
    115.     div>
    116.   div>
    117.   <script>
    118.  
    119.     // 需求：当点击左边的按钮可以切换轮播图
    120.     // 分析：右侧按钮点击，变量++；如果大于等于8则复原0；
    121.     // 左侧按钮点击，变量--；如果小于0则复原最后一张
    122.     // 鼠标经过暂停定时器，鼠标离开开始定时器
    123.     // 1. 初始数据
    124.     const sliderData = [
    125.       { url: './imgs/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
    126.       { url: './imgs/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
    127.       { url: './imgs/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
    128.       { url: './imgs/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
    129.       { url: './imgs/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
    130.       { url: './imgs/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
    131.       { url: './imgs/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
    132.       { url: './imgs/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    133.     ]
    134.   
    135.  
    136.  
    137.   script>
    138. body>
    139.  
    140. html>

    JavaScript代码：

    1.  // 获取p元素
    2.     const p = document.querySelector('.slider-footer p')
    3.     //获取footer
    4.     const footer = document.querySelector('.slider-footer')
    5.     // 获取右边按钮
    6.     const next = document.querySelector('.next')
    7.     // 获取左边按钮
    8.     const prev = document.querySelector('.prev')
    9.     let i = 0
    10.  
    11.     // while (true) {
    12.     //渲染对应的数据
    13.     function move(i) {
    14.       img.src = sliderData[i].url
    15.       p.innerHTML = sliderData[i].title
    16.       // 获取元素
    17.       footer.style.backgroundColor = sliderData[i].color
    18.       // 先删掉之前的active
    19.       document.querySelector('.slider-indicator .active').classList.remove('active')
    20.       //  只让当前的litianjia active
    21.       document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
    22.     }
    23.  
    24.     //定时器函数
    25.     function timer() {
    26.  
    27.     }
    28.     next.addEventListener('click', function () {
    29.       // if (i >= 8)
    30.       //   i = 0
    31.       // i++
    32.       i++
    33.       i = i >= sliderData.length - 1 ? 0 : i
    34.       // 调用渲染函数
    35.       move(i)
    36.     })
    37.     prev.addEventListener('click', function () {
    38.       // if (i < 0)
    39.       //   i = 7
    40.       i--
    41.       i = i < 0 ? sliderData.length - 1 : i
    42.       // 调用渲染函数
    43.       move(i)
    44.  
    45.     })
    46.     // }
    47.  
    48.     // 记录定时器id
    49.     let timeId = 0
    50.     // 自动播放
    51.     timeId = setInterval(function () {
    52.       // 利用js自动调用点击事件
    53.       next.click()
    54.     }, 1000)
    55.  
    56.     document.querySelector('.slider').addEventListener('mouseenter', function () {
    57.       // 停止定时器
    58.       clearInterval(timeId)
    59.  
    60.     })
    61.     //鼠标移开开启定时器
    62.     document.querySelector('.slider').addEventListener('mouseleave', function () {
    63.       timeId = setInterval(function () {
    64.         // 利用js自动调用点击事件
    65.         next.click()
    66.       }, 1000)
    67.     }
    68.     )

  • 相关阅读:
    Mysql Explain
    2022/8/2 考试总结
    初识Linux系统以及部分Linux系统指令介绍
    A1032 Sharing（25分）PAT 甲级(Advanced Level) Practice（C++）满分题解【字符串+结构体+map]
    【100天精通Python】Day53：Python 数据分析_NumPy数据操作和分析进阶
    树莓派4B简单使用内容（以移植QT应用为例）
    vue 引入pinia报 injection “symbol(pinia)“ not found
    万字长文讲解Golang pprof 的使用
    nn.LayerNorm详解+代码演示
    第二章：最新版零基础学习 PYTHON 教程（第五节 - Python 输入/输出–如何在Python中打印而不换行？）
  • 原文地址：https://blog.csdn.net/Saala/article/details/136746270